/*
* Tink's Product Detail Preview
* Version 0.3.5
*
* Completely isolated from the catalogue/category redesign.
*/
html.tinks-product-detail-v1 {
--tpd-bg: #f4f5f6;
--tpd-card: #ffffff;
--tpd-ink: #20242a;
--tpd-muted: #68717d;
--tpd-soft: #8d959e;
--tpd-line: #dfe3e7;
--tpd-line-strong: #ccd2d8;
--tpd-green: #8bd000;
--tpd-green-dark: #77b600;
--tpd-red: #e51922;
--tpd-orange: #ff7417;
--tpd-radius: 18px;
--tpd-shadow: 0 8px 26px rgba(25, 31, 38, .055);
}
/* ==========================================================================
PAGE CANVAS
========================================================================== */
html.tinks-product-detail-v1 body.tb_page_product_product {
background: var(--tpd-bg) !important;
}
html.tinks-product-detail-v1 #content.tpd-content {
background: var(--tpd-bg) !important;
padding: 36px 42px 52px !important;
}
html.tinks-product-detail-v1 #content.tpd-content > .row {
max-width: none !important;
}
/* ==========================================================================
PRODUCT HERO
========================================================================== */
html.tinks-product-detail-v1 .tpd-hero {
max-width: 1880px !important;
margin: 0 auto 22px !important;
padding: 0 !important;
border: 1px solid var(--tpd-line) !important;
border-radius: var(--tpd-radius) !important;
background: var(--tpd-card) !important;
box-shadow: var(--tpd-shadow) !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-hero > .row {
display: grid !important;
grid-template-columns: minmax(0, 1.03fr) minmax(500px, .97fr) !important;
gap: 0 !important;
align-items: stretch !important;
}
html.tinks-product-detail-v1 .tpd-media-col,
html.tinks-product-detail-v1 .tpd-summary-col {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-media-col {
padding: 28px !important;
border-right: 1px solid var(--tpd-line) !important;
background: #fff !important;
}
html.tinks-product-detail-v1 .tpd-summary-col {
padding: 30px !important;
background: #fff !important;
}
/* ==========================================================================
GALLERY
========================================================================== */
html.tinks-product-detail-v1 .tpd-gallery {
margin: 0 !important;
padding-bottom: 0 !important;
}
html.tinks-product-detail-v1 .tpd-gallery #product_images {
border-radius: 14px !important;
background: #fff !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_slides {
border-radius: 14px !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-gallery .mSCover {
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_fullscreen_button {
top: 12px !important;
right: 12px !important;
width: 46px !important;
height: 46px !important;
border: 1px solid rgba(0,0,0,.05) !important;
border-radius: 10px !important;
background: rgba(42, 45, 49, .75) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs_wrap {
margin-top: 12px !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs li {
border: 1px solid var(--tpd-line) !important;
border-radius: 10px !important;
background: #fff !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs li.active {
border-color: #9ca5ae !important;
box-shadow: inset 0 0 0 1px #9ca5ae !important;
}
/* ==========================================================================
TITLE / META
========================================================================== */
html.tinks-product-detail-v1 .tpd-title-block {
margin: 0 0 8px !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-title-block h1 {
margin: 0 !important;
color: var(--tpd-ink) !important;
font-family: "Open Sans", Arial, sans-serif !important;
font-size: clamp(27px, 2vw, 38px) !important;
font-weight: 700 !important;
line-height: 1.12 !important;
letter-spacing: -.025em !important;
}
html.tinks-product-detail-v1 .tpd-meta {
margin: 0 0 22px !important;
}
html.tinks-product-detail-v1 .tpd-meta dl {
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-meta dt,
html.tinks-product-detail-v1 .tpd-meta dd {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
color: var(--tpd-muted) !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
html.tinks-product-detail-v1 .tpd-meta dt {
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .045em !important;
}
/* ==========================================================================
OPTIONS CARD
========================================================================== */
html.tinks-product-detail-v1 .tpd-options-card {
margin: 0 0 14px !important;
padding: 0 !important;
border: 1px solid var(--tpd-line) !important;
border-radius: 14px !important;
background: #f4f5f5 !important;
box-shadow: none !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-options-ui {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 18px 20px !important;
background: #f4f5f5 !important;
}
html.tinks-product-detail-v1 .tpd-options-heading {
display: block !important;
width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
color: var(--tpd-ink) !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
html.tinks-product-detail-v1 .tpd-option-row {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-option-help {
order: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 24px !important;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
padding: 0 !important;
color: #59636f !important;
text-decoration: none !important;
font-size: 20px !important;
line-height: 1 !important;
}
html.tinks-product-detail-v1 .tpd-option-help:hover,
html.tinks-product-detail-v1 .tpd-option-help:focus {
color: var(--tpd-green) !important;
}
html.tinks-product-detail-v1 .tpd-option-checkbox {
order: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-option-checkbox input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
display: block !important;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid #8e969e !important;
border-radius: 5px !important;
background: #fff !important;
box-shadow: none !important;
cursor: pointer !important;
}
html.tinks-product-detail-v1 .tpd-option-checkbox input[type="checkbox"]:checked {
border-color: var(--tpd-green) !important;
background:
var(--tpd-green)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2 6.3 11.5 13 4.8'/%3E%3C/svg%3E")
center / 16px 16px no-repeat !important;
}
html.tinks-product-detail-v1 .tpd-option-checkbox input[type="checkbox"]:focus {
outline: 2px solid rgba(139, 208, 0, .28) !important;
outline-offset: 2px !important;
}
html.tinks-product-detail-v1 .tpd-option-label {
order: 3 !important;
display: block !important;
flex: 0 1 auto !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
color: var(--tpd-ink) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
cursor: pointer !important;
}
/*
* BurnEngine's old option presentation is retained only for its modal markup.
* The visible heading / label / checkbox remnants are removed from layout.
*/
html.tinks-product-detail-v1 .tpd-options-original-hidden,
html.tinks-product-detail-v1 .tpd-options-original-control-hidden {
display: none !important;
}
html.tinks-product-detail-v1 .tpd-options-original-body {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
html.tinks-product-detail-v1 .tpd-options-original-body > .form-group {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
/* Keep Bootstrap modal descendants available even though their old control
wrappers are visually suppressed. */
html.tinks-product-detail-v1 .tpd-options-original-body .modal {
display: none;
}
html.tinks-product-detail-v1 .tpd-options-original-body .modal.in {
display: block !important;
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-options-ui {
padding: 18px 20px !important;
}
html.tinks-product-detail-v1 .tpd-options-heading {
margin-bottom: 14px !important;
font-size: 18px !important;
}
html.tinks-product-detail-v1 .tpd-option-row {
gap: 10px !important;
}
html.tinks-product-detail-v1 .tpd-option-label {
font-size: 14px !important;
white-space: nowrap !important;
}
}
/* ==========================================================================
PURCHASE CARD
========================================================================== */
html.tinks-product-detail-v1 .tpd-purchase-card {
margin: 0 0 14px !important;
padding: 20px !important;
border: 1px solid var(--tpd-line) !important;
border-radius: 14px !important;
background: #f7f8f8 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row {
display: grid !important;
grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.2fr) !important;
grid-template-rows: auto auto !important;
gap: 10px 22px !important;
align-items: center !important;
}
/* Hide old standalone "Price" heading column. */
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:first-child {
display: none !important;
}
/* Price column */
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(2) {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Buy column */
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(3) {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-price {
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-price .price {
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-old-price {
display: block !important;
margin: 0 0 1px !important;
color: #9299a1 !important;
font-size: 13px !important;
line-height: 1.15 !important;
text-decoration-thickness: 1px !important;
}
html.tinks-product-detail-v1 .tpd-current-price {
display: block !important;
color: var(--tpd-ink) !important;
font-size: 32px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
html.tinks-product-detail-v1 .tpd-current-price .tb_decimal {
font-size: .58em !important;
vertical-align: super !important;
}
html.tinks-product-detail-v1 .tpd-tax {
display: block !important;
margin-top: 6px !important;
color: var(--tpd-muted) !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
html.tinks-product-detail-v1 .tpd-savings {
display: inline-flex !important;
margin: 7px 0 0 !important;
padding: 5px 8px !important;
border-radius: 6px !important;
background: #fff0f0 !important;
color: #c71920 !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_cart_wrap,
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
width: 100% !important;
}
html.tinks-product-detail-v1 .tpd-buy label[for="input-quantity"],
html.tinks-product-detail-v1 .tpd-buy br {
display: none !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
width: 86px !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin {
height: 48px !important;
}
html.tinks-product-detail-v1 .tpd-buy .form-control {
height: 48px !important;
border: 1px solid var(--tpd-line-strong) !important;
border-radius: 9px 0 0 9px !important;
background: #fff !important;
box-shadow: none !important;
font-size: 14px !important;
text-align: center !important;
}
html.tinks-product-detail-v1 .tpd-buy .btn-default {
border-color: var(--tpd-line-strong) !important;
background: #edf0f2 !important;
color: #555e67 !important;
}
html.tinks-product-detail-v1 .tpd-buy-button {
min-width: 150px !important;
height: 48px !important;
margin: 0 !important;
padding: 0 24px !important;
border: 0 !important;
border-radius: 9px !important;
background: var(--tpd-green) !important;
color: #fff !important;
box-shadow: none !important;
font-size: 15px !important;
font-weight: 800 !important;
}
html.tinks-product-detail-v1 .tpd-buy-button:hover {
background: var(--tpd-green-dark) !important;
}
/* ==========================================================================
AVAILABILITY
========================================================================== */
html.tinks-product-detail-v1 .tpd-availability-card {
margin: 0 0 14px !important;
padding: 18px 20px !important;
border: 1px solid var(--tpd-line) !important;
border-radius: 14px !important;
background: #fff !important;
}
html.tinks-product-detail-v1 .tpd-availability-card .panel-heading {
margin: 0 0 10px !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-availability-card .panel-title {
color: var(--tpd-ink) !important;
font-size: 17px !important;
font-weight: 700 !important;
}
html.tinks-product-detail-v1 .tpd-availability {
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-availability .panel-body {
padding: 0 !important;
color: var(--tpd-muted) !important;
font-size: 12px !important;
line-height: 1.7 !important;
}
html.tinks-product-detail-v1 .tpd-availability img {
width: 9px !important;
height: 9px !important;
margin-right: 5px !important;
}
/* ==========================================================================
TABS
========================================================================== */
html.tinks-product-detail-v1 .tpd-tabs-card {
margin: 18px 0 0 !important;
border: 1px solid var(--tpd-line) !important;
border-radius: 14px !important;
background: #fff !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--tpd-line) !important;
background: #f4f5f6 !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav > li {
float: none !important;
margin: 0 !important;
border: 0 !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav > li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-right: 1px solid var(--tpd-line) !important;
border-radius: 0 !important;
background: transparent !important;
color: #505862 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav > li:last-child > a {
border-right: 0 !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav > li.active > a,
html.tinks-product-detail-v1 .tpd-tabs-nav > li > a:hover {
background: #fff !important;
color: var(--tpd-ink) !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav > li.active > a {
box-shadow: inset 0 -3px 0 var(--tpd-green) !important;
}
html.tinks-product-detail-v1 .tpd-tab-pane {
height: auto !important;
min-height: 0 !important;
}
html.tinks-product-detail-v1 .tpd-description {
margin: 0 !important;
padding: 24px 26px 28px !important;
}
html.tinks-product-detail-v1 .tpd-description .panel-body {
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-description h3 {
margin: 22px 0 10px !important;
color: var(--tpd-ink) !important;
font-size: 17px !important;
font-weight: 800 !important;
}
html.tinks-product-detail-v1 .tpd-description h3:first-child {
margin-top: 0 !important;
}
html.tinks-product-detail-v1 .tpd-description p,
html.tinks-product-detail-v1 .tpd-description li {
color: #4f5863 !important;
font-size: 13px !important;
line-height: 1.62 !important;
}
html.tinks-product-detail-v1 .tpd-description ul {
margin: 8px 0 18px 20px !important;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1100px) {
html.tinks-product-detail-v1 .tpd-hero > .row {
grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr) !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row {
grid-template-columns: 1fr !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(2),
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(3) {
grid-column: 1 !important;
grid-row: auto !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
justify-content: flex-start !important;
}
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 #content.tpd-content {
padding: 16px 14px 32px !important;
}
html.tinks-product-detail-v1 .tpd-hero {
border-radius: 14px !important;
}
html.tinks-product-detail-v1 .tpd-hero > .row {
display: block !important;
}
html.tinks-product-detail-v1 .tpd-media-col {
padding: 14px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--tpd-line) !important;
}
html.tinks-product-detail-v1 .tpd-summary-col {
padding: 20px 16px !important;
}
html.tinks-product-detail-v1 .tpd-title-block h1 {
font-size: clamp(24px, 7vw, 32px) !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card {
padding: 16px !important;
}
html.tinks-product-detail-v1 .tpd-current-price {
font-size: 30px !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_cart_wrap,
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
justify-content: stretch !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
flex: 0 0 90px !important;
}
html.tinks-product-detail-v1 .tpd-buy-button {
flex: 1 1 auto !important;
min-width: 0 !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav {
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav > li {
flex: 0 0 auto !important;
min-width: 145px !important;
}
html.tinks-product-detail-v1 .tpd-tabs-nav > li > a {
padding: 0 16px !important;
}
html.tinks-product-detail-v1 .tpd-description {
padding: 20px 18px 24px !important;
}
html.tinks-product-detail-v1 .tpd-description p,
html.tinks-product-detail-v1 .tpd-description li {
font-size: 14px !important;
}
}
/* ==========================================================================
V0.1.1 — full-width white product canvas + purchase area refinement
========================================================================== */
/*
* The product page itself becomes the white canvas.
* Remove the large card/shadow treatment around the whole product.
*/
html.tinks-product-detail-v1 body.tb_page_product_product,
html.tinks-product-detail-v1 #wrapper,
html.tinks-product-detail-v1 #content.tpd-content {
background: #ffffff !important;
}
html.tinks-product-detail-v1 #content.tpd-content {
padding: 34px 42px 50px !important;
}
html.tinks-product-detail-v1 .tpd-hero {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
overflow: visible !important;
}
html.tinks-product-detail-v1 .tpd-hero > .row {
min-height: calc(100vh - 235px) !important;
}
/*
* Keep a clean visual division between gallery and buying information,
* but no heavy containing card.
*/
html.tinks-product-detail-v1 .tpd-media-col {
padding: 22px 34px 34px 10px !important;
border-right: 1px solid #e3e6e9 !important;
background: #ffffff !important;
}
html.tinks-product-detail-v1 .tpd-summary-col {
padding: 22px 10px 34px 34px !important;
background: #ffffff !important;
}
/* Let the gallery occupy its available space more naturally. */
html.tinks-product-detail-v1 .tpd-gallery #product_images,
html.tinks-product-detail-v1 .tpd-gallery .tb_slides {
border-radius: 0 !important;
}
/* ==========================================================================
PURCHASE AREA — cleaner price / qty / buy relationship
========================================================================== */
html.tinks-product-detail-v1 .tpd-purchase-card {
margin: 20px 0 14px !important;
padding: 0 !important;
border: 1px solid #e1e5e8 !important;
border-radius: 12px !important;
background: #f7f8f8 !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row {
display: grid !important;
grid-template-columns: minmax(190px, .92fr) minmax(320px, 1.08fr) !important;
gap: 0 !important;
min-height: 108px !important;
align-items: stretch !important;
}
/* price side */
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(2) {
display: flex !important;
align-items: center !important;
padding: 18px 22px !important;
border-right: 1px solid #e1e5e8 !important;
background: #ffffff !important;
}
/* purchase side */
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(3) {
display: flex !important;
align-items: center !important;
padding: 18px 22px !important;
background: #f7f8f8 !important;
}
html.tinks-product-detail-v1 .tpd-price {
width: 100% !important;
}
html.tinks-product-detail-v1 .tpd-price .price {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-old-price {
margin: 0 0 2px !important;
color: #939aa2 !important;
font-size: 13px !important;
line-height: 1.1 !important;
}
html.tinks-product-detail-v1 .tpd-current-price {
color: #20242a !important;
font-size: 34px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
html.tinks-product-detail-v1 .tpd-tax {
margin-top: 7px !important;
color: #747d87 !important;
font-size: 11.5px !important;
}
html.tinks-product-detail-v1 .tpd-savings {
margin-top: 7px !important;
padding: 5px 8px !important;
border-radius: 5px !important;
background: #ffecec !important;
color: #d71920 !important;
font-size: 11px !important;
font-weight: 800 !important;
}
/*
* Quantity + Buy become one clear horizontal action group.
*/
html.tinks-product-detail-v1 .tpd-buy,
html.tinks-product-detail-v1 .tpd-buy .tb_cart_wrap,
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
width: 100% !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
display: grid !important;
grid-template-columns: 92px minmax(150px, 1fr) !important;
gap: 10px !important;
align-items: stretch !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
width: 92px !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin {
height: 50px !important;
}
html.tinks-product-detail-v1 .tpd-buy .form-control {
height: 50px !important;
padding: 0 30px 0 10px !important;
border: 1px solid #ccd2d8 !important;
border-radius: 9px 0 0 9px !important;
background: #ffffff !important;
color: #20242a !important;
font-size: 15px !important;
font-weight: 600 !important;
}
html.tinks-product-detail-v1 .tpd-buy .btn-default {
border-color: #ccd2d8 !important;
background: #eef1f3 !important;
color: #4f5861 !important;
}
html.tinks-product-detail-v1 .tpd-buy-button {
min-width: 0 !important;
width: 100% !important;
height: 50px !important;
margin: 0 !important;
padding: 0 26px !important;
border: 1px solid #7cbd00 !important;
border-radius: 9px !important;
background: #8bd000 !important;
color: #ffffff !important;
box-shadow: none !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: none !important;
}
html.tinks-product-detail-v1 .tpd-buy-button:hover,
html.tinks-product-detail-v1 .tpd-buy-button:focus {
border-color: #70ab00 !important;
background: #7abd00 !important;
color: #ffffff !important;
}
/* ==========================================================================
SUB-SECTIONS — subtle separation on the white page
========================================================================== */
html.tinks-product-detail-v1 .tpd-availability-card {
border-color: #e1e5e8 !important;
background: #f7f8f8 !important;
box-shadow: none !important;
}
html.tinks-product-detail-v1 .tpd-tabs-card {
border-color: #e1e5e8 !important;
background: #ffffff !important;
box-shadow: none !important;
}
/* ==========================================================================
MOBILE
========================================================================== */
@media (max-width: 800px) {
html.tinks-product-detail-v1 #content.tpd-content {
padding: 18px 14px 34px !important;
}
html.tinks-product-detail-v1 .tpd-hero > .row {
min-height: 0 !important;
}
html.tinks-product-detail-v1 .tpd-media-col {
padding: 12px 0 20px !important;
border-right: 0 !important;
border-bottom: 1px solid #e3e6e9 !important;
}
html.tinks-product-detail-v1 .tpd-summary-col {
padding: 20px 0 0 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row {
display: block !important;
min-height: 0 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(2),
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(3) {
padding: 16px !important;
border-right: 0 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(2) {
border-bottom: 1px solid #e1e5e8 !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
grid-template-columns: 88px minmax(0, 1fr) !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
width: 88px !important;
}
html.tinks-product-detail-v1 .tpd-buy-button {
min-width: 0 !important;
}
}
/* ==========================================================================
V0.1.2 — full-width product identity + unified purchase panel
========================================================================== */
/* --------------------------------------------------------------------------
Product title / SKU span the full product page
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-hero > .row {
grid-template-columns: minmax(0, 1.03fr) minmax(500px, .97fr) !important;
grid-template-rows: auto minmax(0, 1fr) !important;
}
html.tinks-product-detail-v1 .tpd-product-heading {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
padding: 10px 10px 22px !important;
border-bottom: 1px solid #e3e6e9 !important;
background: #ffffff !important;
}
html.tinks-product-detail-v1 .tpd-media-col {
grid-column: 1 !important;
grid-row: 2 !important;
}
html.tinks-product-detail-v1 .tpd-summary-col {
grid-column: 2 !important;
grid-row: 2 !important;
}
/* Title is now page-level, not confined to the purchase column. */
html.tinks-product-detail-v1 .tpd-product-heading .tpd-title-block {
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-product-heading .tpd-title-block h1 {
max-width: 1500px !important;
margin: 0 !important;
font-size: clamp(30px, 2.25vw, 42px) !important;
line-height: 1.08 !important;
}
html.tinks-product-detail-v1 .tpd-product-heading .tpd-meta {
margin: 9px 0 0 !important;
}
/* Remove any legacy spacing from the title/meta after relocation. */
html.tinks-product-detail-v1 .tpd-product-heading .tb_mt_10,
html.tinks-product-detail-v1 .tpd-product-heading .tb_mb_10 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
Purchase block: one coherent surface
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-purchase-card {
background: #f5f6f7 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(2),
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(3) {
background: #f5f6f7 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(2) {
border-right: 1px solid #dde2e6 !important;
}
/*
* Ensure the ProductPriceSystem itself cannot reintroduce its original
* BurnEngine background/padding.
*/
html.tinks-product-detail-v1 .tpd-price,
html.tinks-product-detail-v1 .tpd-price .price {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* --------------------------------------------------------------------------
Buy button: completely override BurnEngine's orange button skin
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 #button-cart.tpd-buy-button,
html.tinks-product-detail-v1 #button-cart.tpd-buy-button:hover,
html.tinks-product-detail-v1 #button-cart.tpd-buy-button:focus,
html.tinks-product-detail-v1 #button-cart.tpd-buy-button:active,
html.tinks-product-detail-v1 .tpd-buy #button-cart.btn {
-webkit-appearance: none !important;
appearance: none !important;
background: #8bd000 !important;
background-color: #8bd000 !important;
background-image: none !important;
border: 1px solid #7cbd00 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
opacity: 1 !important;
}
html.tinks-product-detail-v1 #button-cart.tpd-buy-button:hover,
html.tinks-product-detail-v1 #button-cart.tpd-buy-button:focus {
background: #7abd00 !important;
background-color: #7abd00 !important;
border-color: #70ab00 !important;
}
/* BurnEngine button decorators must not paint over our CTA. */
html.tinks-product-detail-v1 #button-cart.tpd-buy-button::before,
html.tinks-product-detail-v1 #button-cart.tpd-buy-button::after {
display: none !important;
content: none !important;
background: none !important;
}
/* ==========================================================================
RESPONSIVE TITLE PLACEMENT
========================================================================== */
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-product-heading {
padding: 8px 0 16px !important;
}
html.tinks-product-detail-v1 .tpd-product-heading .tpd-title-block h1 {
font-size: clamp(25px, 7vw, 34px) !important;
}
html.tinks-product-detail-v1 .tpd-hero > .row {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto !important;
}
html.tinks-product-detail-v1 .tpd-product-heading {
grid-column: 1 !important;
grid-row: 1 !important;
}
html.tinks-product-detail-v1 .tpd-media-col {
grid-column: 1 !important;
grid-row: 2 !important;
}
html.tinks-product-detail-v1 .tpd-summary-col {
grid-column: 1 !important;
grid-row: 3 !important;
}
}
/* ==========================================================================
V0.1.3 — tighten page top + align quantity / Buy controls
========================================================================== */
/*
* The source section still carries BurnEngine's tb_pt_40/tb_pr_40/etc classes.
* Our product-detail skin owns the product canvas, so make the top spacing
* intentionally compact and explicit.
*/
html.tinks-product-detail-v1 #content.tpd-content {
padding-top: 10px !important;
}
/*
* Remove any inherited top offset/margin on the first product row and its
* page-level heading. This keeps the product identity close to the nav bar.
*/
html.tinks-product-detail-v1 #content.tpd-content > .row,
html.tinks-product-detail-v1 .tpd-hero,
html.tinks-product-detail-v1 .tpd-hero > .row,
html.tinks-product-detail-v1 .tpd-product-heading {
margin-top: 0 !important;
}
html.tinks-product-detail-v1 .tpd-product-heading {
padding-top: 6px !important;
}
/* --------------------------------------------------------------------------
Quantity + Buy — exact common baseline / height
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-buy,
html.tinks-product-detail-v1 .tpd-buy .tb_cart_wrap {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
display: grid !important;
grid-template-columns: 92px minmax(150px, 1fr) !important;
column-gap: 10px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap,
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin,
html.tinks-product-detail-v1 #button-cart.tpd-buy-button {
height: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
align-self: center !important;
vertical-align: middle !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
width: 92px !important;
display: block !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin {
display: flex !important;
align-items: stretch !important;
width: 100% !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin > .form-control {
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin > .btn-group-vertical {
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin > .btn-group-vertical > .btn {
box-sizing: border-box !important;
height: 25px !important;
min-height: 25px !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 24px !important;
}
html.tinks-product-detail-v1 #button-cart.tpd-buy-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
/* Keep the purchase cell itself vertically centred. */
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col:nth-child(3) {
display: flex !important;
align-items: center !important;
}
/* Mobile keeps a little more breathing room under the header. */
@media (max-width: 800px) {
html.tinks-product-detail-v1 #content.tpd-content {
padding-top: 8px !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
grid-template-columns: 88px minmax(0, 1fr) !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
width: 88px !important;
}
}
/* ==========================================================================
V0.1.4 — remove inherited BurnEngine row/column top spacing
========================================================================== */
/*
* The remaining vertical gap is not #content anymore.
*
* BurnEngine's immediate child row (#content > .row) uses gutter utility
* classes and its .main column is carrying inherited top spacing. We only
* want horizontal gutters on this product page, so neutralise top spacing
* at BOTH of those structural levels.
*/
html.tinks-product-detail-v1 #content.tpd-content > .row {
padding-top: 0 !important;
margin-top: 0 !important;
}
html.tinks-product-detail-v1 #content.tpd-content > .row > .main,
html.tinks-product-detail-v1 #content.tpd-content > .row > .col.main,
html.tinks-product-detail-v1 #content.tpd-content .main.col-xs-12.col-sm-fill.col-md-fill {
padding-top: 0 !important;
margin-top: 0 !important;
}
/*
* The product hero is the first meaningful child inside .main.
* Do not allow a theme utility or pseudo spacer ahead of it.
*/
html.tinks-product-detail-v1 #content.tpd-content .main > .tpd-hero:first-child,
html.tinks-product-detail-v1 #content.tpd-content .main > .row-wrap:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
html.tinks-product-detail-v1 #content.tpd-content .main::before,
html.tinks-product-detail-v1 #content.tpd-content .main::after {
margin-top: 0 !important;
}
/*
* Tighten the heading itself another step now the parent spacing is gone.
*/
html.tinks-product-detail-v1 .tpd-product-heading {
padding-top: 0 !important;
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 #content.tpd-content > .row > .main,
html.tinks-product-detail-v1 #content.tpd-content > .row > .col.main {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
/* ==========================================================================
V0.1.5 — compact Buy button + clean quantity control outline
========================================================================== */
@media (min-width: 801px) {
/*
* Keep quantity + Buy grouped, but stop the Buy CTA stretching across the
* whole purchase cell.
*/
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
grid-template-columns: 92px 190px !important;
justify-content: end !important;
}
html.tinks-product-detail-v1 #button-cart.tpd-buy-button {
width: 190px !important;
min-width: 190px !important;
max-width: 190px !important;
}
}
/*
* BurnEngine/TouchSpin can paint a square border around the whole quantity
* widget. Remove that shell so only the actual input and spinner controls
* define the visible rounded shape.
*/
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap,
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin,
html.tinks-product-detail-v1 .tpd-buy .input-group {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border-radius: 9px !important;
overflow: visible !important;
}
/* Quantity text field: rounded on the left only. */
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin > .form-control,
html.tinks-product-detail-v1 .tpd-buy #input-quantity {
border: 1px solid #ccd2d8 !important;
border-right: 0 !important;
border-radius: 9px 0 0 9px !important;
outline: 0 !important;
box-shadow: none !important;
}
/* Spinner stack: rounded on the right only. */
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin > .btn-group-vertical {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 9px 9px 0 !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1
.tpd-buy
.bootstrap-touchspin
> .btn-group-vertical
> .btn {
border-left: 1px solid #ccd2d8 !important;
border-right: 1px solid #ccd2d8 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
html.tinks-product-detail-v1
.tpd-buy
.bootstrap-touchspin
> .btn-group-vertical
> .btn:first-child {
border-top: 1px solid #ccd2d8 !important;
border-radius: 0 9px 0 0 !important;
}
html.tinks-product-detail-v1
.tpd-buy
.bootstrap-touchspin
> .btn-group-vertical
> .btn:last-child {
border-bottom: 1px solid #ccd2d8 !important;
border-radius: 0 0 9px 0 !important;
}
/* Mobile keeps the Buy CTA flexible/full available width. */
@media (max-width: 800px) {
html.tinks-product-detail-v1 #button-cart.tpd-buy-button {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
}
/* ==========================================================================
V0.1.6 — reserve the quantity control's actual width
========================================================================== */
@media (min-width: 801px) {
/*
* TouchSpin renders the quantity wrapper at 100px on this theme.
* V0.1.5 reserved only 92px, causing the Buy button to overlap it.
*/
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
grid-template-columns: 100px 180px !important;
column-gap: 14px !important;
justify-content: end !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
}
html.tinks-product-detail-v1 #button-cart.tpd-buy-button {
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
}
}
/* Keep the TouchSpin internals contained inside the reserved 100px cell. */
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin {
width: 100% !important;
max-width: 100% !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin > .form-control {
min-width: 0 !important;
width: calc(100% - 30px) !important;
}
html.tinks-product-detail-v1 .tpd-buy .bootstrap-touchspin > .btn-group-vertical {
flex: 0 0 30px !important;
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
}
/* Mobile stays fluid. */
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-buy .tb_purchase_button {
grid-template-columns: 100px minmax(0, 1fr) !important;
column-gap: 10px !important;
}
html.tinks-product-detail-v1 .tpd-buy .tb_input_wrap {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
}
}
/* ==========================================================================
V0.1.7 — specification alignment + catalogue-style Accessories cards
========================================================================== */
/* --------------------------------------------------------------------------
SPECIFICATIONS
-------------------------------------------------------------------------- */
/*
* ProductAttributesSystem carries its own tb_pt_* spacing. That is the
* source of the visible gap under the Specifications tab.
*/
html.tinks-product-detail-v1 .tpd-specifications-pane,
html.tinks-product-detail-v1 .tpd-specifications-system,
html.tinks-product-detail-v1 .tpd-specifications-system[class*="tb_pt_"] {
margin-top: 0 !important;
padding-top: 0 !important;
}
html.tinks-product-detail-v1 .tpd-specifications-pane > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Keep the attribute table crisp and consistent with the rest of the page. */
html.tinks-product-detail-v1 .tpd-specifications-pane table {
width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
background: #fff !important;
}
html.tinks-product-detail-v1 .tpd-specifications-pane table th,
html.tinks-product-detail-v1 .tpd-specifications-pane table td {
padding: 11px 16px !important;
border-bottom: 1px solid #e3e6e9 !important;
color: #4f5863 !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
}
html.tinks-product-detail-v1 .tpd-specifications-pane table th {
color: #20242a !important;
font-weight: 750 !important;
}
html.tinks-product-detail-v1 .tpd-specifications-pane table tr:first-child th,
html.tinks-product-detail-v1 .tpd-specifications-pane table tr:first-child td {
border-top: 0 !important;
}
/* --------------------------------------------------------------------------
ACCESSORIES — catalogue-style product grid
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-accessories-pane {
padding: 20px !important;
background: #f4f5f6 !important;
}
/*
* BurnEngine uses slightly different product wrappers depending on the
* widget. Normalise the common grid containers without disturbing links or
* cart behaviour.
*/
html.tinks-product-detail-v1 .tpd-accessories-pane .row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .product-layout,
html.tinks-product-detail-v1 .tpd-accessories-pane [class*="product-layout"],
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_product {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_product {
display: flex !important;
flex-direction: column !important;
min-height: 390px !important;
padding: 14px !important;
border: 1px solid #dfe3e7 !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 4px 14px rgba(25,31,38,.035) !important;
overflow: hidden !important;
}
/* image */
html.tinks-product-detail-v1 .tpd-accessories-pane .image,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 170px !important;
min-height: 170px !important;
margin: 0 0 12px !important;
padding: 6px !important;
background: #fff !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .image img,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_image img,
html.tinks-product-detail-v1 .tpd-accessories-pane img {
max-width: 100% !important;
max-height: 160px !important;
object-fit: contain !important;
}
/* caption/content */
html.tinks-product-detail-v1 .tpd-accessories-pane .caption {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane h4,
html.tinks-product-detail-v1 .tpd-accessories-pane .name,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_title {
margin: 0 0 9px !important;
color: #20242a !important;
font-size: 14px !important;
font-weight: 760 !important;
line-height: 1.28 !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane h4 a,
html.tinks-product-detail-v1 .tpd-accessories-pane .name a,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_title a {
color: inherit !important;
text-decoration: none !important;
}
/* description */
html.tinks-product-detail-v1 .tpd-accessories-pane .description,
html.tinks-product-detail-v1 .tpd-accessories-pane .caption > p:not(.price) {
display: -webkit-box !important;
margin: 0 0 12px !important;
overflow: hidden !important;
color: #66707b !important;
font-size: 12px !important;
line-height: 1.45 !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 4 !important;
}
/* price */
html.tinks-product-detail-v1 .tpd-accessories-pane .price {
margin: auto 0 10px !important;
color: #20242a !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-align: right !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .price-old {
margin-right: 5px !important;
color: #969da5 !important;
font-size: 10px !important;
font-weight: 500 !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .price-tax {
display: block !important;
margin-top: 4px !important;
color: #9299a1 !important;
font-size: 9.5px !important;
font-weight: 500 !important;
}
/* actions */
html.tinks-product-detail-v1 .tpd-accessories-pane .button-group,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_button_add_to_cart {
display: flex !important;
width: 100% !important;
margin-top: auto !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .button-group button,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_button_add_to_cart a,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_button_add_to_cart button,
html.tinks-product-detail-v1 .tpd-accessories-pane .btn-primary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
padding: 7px 12px !important;
border: 1px solid #7cbd00 !important;
border-radius: 8px !important;
background: #8bd000 !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: 11px !important;
font-weight: 760 !important;
text-decoration: none !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .button-group button:hover,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_button_add_to_cart a:hover,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_button_add_to_cart button:hover {
background: #7abd00 !important;
border-color: #70ab00 !important;
}
/*
* If the native accessory product widget also contains a separate details
* action, render the two actions as the same joined grey/green language used
* in the main catalogue cards.
*/
html.tinks-product-detail-v1 .tpd-accessories-pane .button-group:has(button + button),
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_button_more_details + .tb_button_add_to_cart {
gap: 0 !important;
}
/* Responsive accessory grid */
@media (max-width: 1200px) {
html.tinks-product-detail-v1 .tpd-accessories-pane .row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-accessories-pane {
padding: 12px !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_product {
min-height: 330px !important;
padding: 10px !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .image,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_image {
height: 130px !important;
min-height: 130px !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .image img,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_image img,
html.tinks-product-detail-v1 .tpd-accessories-pane img {
max-height: 120px !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane h4,
html.tinks-product-detail-v1 .tpd-accessories-pane .name,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_title {
font-size: 12.5px !important;
}
html.tinks-product-detail-v1 .tpd-accessories-pane .description,
html.tinks-product-detail-v1 .tpd-accessories-pane .caption > p:not(.price) {
font-size: 11px !important;
-webkit-line-clamp: 3 !important;
}
}
/* ==========================================================================
V0.1.8 — white product-tab canvas + shared tiles for Accessories /
Related Items / Spare Parts
========================================================================== */
/*
* Product-based tabs should feel like part of the main white product page.
* Separation now comes from the individual rounded tiles rather than a grey
* panel behind the entire product grid.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane,
html.tinks-product-detail-v1 .tpd-accessories-pane,
html.tinks-product-detail-v1 .tpd-related-pane,
html.tinks-product-detail-v1 .tpd-spare-parts-pane {
padding: 20px !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
/*
* Use the same quiet outline language as the tab container itself.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product,
html.tinks-product-detail-v1 .tpd-accessories-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-accessories-pane .tb_product,
html.tinks-product-detail-v1 .tpd-related-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-related-pane .tb_product,
html.tinks-product-detail-v1 .tpd-spare-parts-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-spare-parts-pane .tb_product {
border: 1px solid #dfe3e7 !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: none !important;
}
/*
* Some BurnEngine product widgets paint their immediate product-layout cell
* rather than .product-thumb. Keep those cells transparent so the tile border
* is the only visible container.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-layout,
html.tinks-product-detail-v1 .tpd-product-grid-pane [class*="product-layout"],
html.tinks-product-detail-v1 .tpd-related-pane .product-layout,
html.tinks-product-detail-v1 .tpd-spare-parts-pane .product-layout {
background: transparent !important;
box-shadow: none !important;
}
/*
* Carry the complete V0.1.7 product-card treatment across all three
* product-grid tabs, not just Accessories.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-layout,
html.tinks-product-detail-v1 .tpd-product-grid-pane [class*="product-layout"],
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product {
display: flex !important;
flex-direction: column !important;
min-height: 390px !important;
padding: 14px !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .image,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 170px !important;
min-height: 170px !important;
margin: 0 0 12px !important;
padding: 6px !important;
background: #ffffff !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .image img,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_image img,
html.tinks-product-detail-v1 .tpd-product-grid-pane img {
max-width: 100% !important;
max-height: 160px !important;
object-fit: contain !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .caption {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane h4,
html.tinks-product-detail-v1 .tpd-product-grid-pane .name,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_title {
margin: 0 0 9px !important;
color: #20242a !important;
font-size: 14px !important;
font-weight: 760 !important;
line-height: 1.28 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane h4 a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .name a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_title a {
color: inherit !important;
text-decoration: none !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .description,
html.tinks-product-detail-v1 .tpd-product-grid-pane .caption > p:not(.price) {
display: -webkit-box !important;
margin: 0 0 12px !important;
overflow: hidden !important;
color: #66707b !important;
font-size: 12px !important;
line-height: 1.45 !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 4 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .price {
margin: auto 0 10px !important;
color: #20242a !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-align: right !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-old {
margin-right: 5px !important;
color: #969da5 !important;
font-size: 10px !important;
font-weight: 500 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-tax {
display: block !important;
margin-top: 4px !important;
color: #9299a1 !important;
font-size: 9.5px !important;
font-weight: 500 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .button-group,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_button_add_to_cart {
display: flex !important;
width: 100% !important;
margin-top: auto !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .button-group button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_button_add_to_cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_button_add_to_cart button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .btn-primary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
padding: 7px 12px !important;
border: 1px solid #7cbd00 !important;
border-radius: 8px !important;
background: #8bd000 !important;
background-image: none !important;
color: #ffffff !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: 11px !important;
font-weight: 760 !important;
text-decoration: none !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .button-group button:hover,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_button_add_to_cart a:hover,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_button_add_to_cart button:hover {
background: #7abd00 !important;
border-color: #70ab00 !important;
}
@media (max-width: 1200px) {
html.tinks-product-detail-v1 .tpd-product-grid-pane .row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-product-grid-pane {
padding: 12px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product {
min-height: 330px !important;
padding: 10px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .image,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_image {
height: 130px !important;
min-height: 130px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .image img,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_image img,
html.tinks-product-detail-v1 .tpd-product-grid-pane img {
max-height: 120px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane h4,
html.tinks-product-detail-v1 .tpd-product-grid-pane .name,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_title {
font-size: 12.5px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .description,
html.tinks-product-detail-v1 .tpd-product-grid-pane .caption > p:not(.price) {
font-size: 11px !important;
-webkit-line-clamp: 3 !important;
}
}
/* ==========================================================================
V0.1.9 — denser tab grids + category-style joined actions
========================================================================== */
/* Less empty space around the grid, but keep the white tab canvas. */
html.tinks-product-detail-v1 .tpd-product-grid-pane,
html.tinks-product-detail-v1 .tpd-accessories-pane,
html.tinks-product-detail-v1 .tpd-related-pane,
html.tinks-product-detail-v1 .tpd-spare-parts-pane {
padding: 12px !important;
}
/* Bring cards closer together, matching the main catalogue rhythm. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .row {
gap: 10px !important;
}
/* More breathing room INSIDE each card. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product {
min-height: 410px !important;
padding: 16px 16px 14px !important;
border: 1px solid #d9dee3 !important;
border-radius: 14px !important;
background: #fff !important;
box-shadow: none !important;
}
/* Slightly more generous image stage, like the regular grid cards. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .image,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_image {
height: 178px !important;
min-height: 178px !important;
margin-bottom: 14px !important;
padding: 8px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .image img,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_image img,
html.tinks-product-detail-v1 .tpd-product-grid-pane img {
max-height: 166px !important;
}
/* Stronger internal typography, closer to the category cards. */
html.tinks-product-detail-v1 .tpd-product-grid-pane h4,
html.tinks-product-detail-v1 .tpd-product-grid-pane .name,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_title {
margin-bottom: 10px !important;
font-size: 13.5px !important;
font-weight: 780 !important;
line-height: 1.28 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .description,
html.tinks-product-detail-v1 .tpd-product-grid-pane .caption > p:not(.price) {
margin-bottom: 13px !important;
font-size: 11.5px !important;
line-height: 1.46 !important;
-webkit-line-clamp: 4 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .price {
margin: auto 0 11px !important;
font-size: 18px !important;
font-weight: 800 !important;
}
/* --------------------------------------------------------------------------
Joined More Information / Buy bar
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
width: 100% !important;
min-height: 38px !important;
margin-top: auto !important;
border: 1px solid #bfc5ca !important;
border-radius: 9px !important;
background: #fff !important;
overflow: hidden !important;
}
/* Grey left half, same language as category "View Details". */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
min-width: 0 !important;
min-height: 38px !important;
margin: 0 !important;
padding: 7px 8px !important;
border: 0 !important;
border-right: 1px solid rgba(255,255,255,.45) !important;
border-radius: 0 !important;
background: #949493 !important;
color: #fff !important;
box-shadow: none !important;
font-size: 10px !important;
font-weight: 760 !important;
line-height: 1.1 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info:hover {
background: #858584 !important;
color: #fff !important;
}
/*
* Native Buy/Order wrapper becomes the right half. Its original node is moved
* here by JS, so its original click behaviour is preserved.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* Remove old widget-level sizing/margins inside the joined bar. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart > *,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn {
width: 100% !important;
height: 100% !important;
min-height: 38px !important;
margin: 0 !important;
padding: 7px 8px !important;
border: 0 !important;
border-radius: 0 !important;
background: #8bd000 !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: 10px !important;
font-weight: 760 !important;
line-height: 1.1 !important;
text-align: center !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a:hover,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button:hover,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn:hover {
background: #7abd00 !important;
}
/*
* Once the native cart control has been moved into our action bar, suppress
* any old empty spacing left by BurnEngine around its former position.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane [data-tpd-actions="1"] > .tb_button_add_to_cart:empty,
html.tinks-product-detail-v1 .tpd-product-grid-pane [data-tpd-actions="1"] > .button-group:empty {
display: none !important;
}
/* Tax stays below the actions, just as in the main catalogue grid. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-tax {
margin-top: 6px !important;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1200px) {
html.tinks-product-detail-v1 .tpd-product-grid-pane .row {
gap: 9px !important;
}
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-product-grid-pane {
padding: 9px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .row {
gap: 8px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product {
min-height: 350px !important;
padding: 11px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions {
min-height: 36px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart > *,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button {
min-height: 36px !important;
padding: 6px 5px !important;
font-size: 9px !important;
}
}
/* ==========================================================================
V0.2.0 — reliable lazy-tab actions + catalogue icons + tax placement
========================================================================== */
/*
* The action bar should visually match the normal catalogue card bar.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions {
grid-template-columns: 1fr 1fr !important;
min-height: 40px !important;
margin-top: 10px !important;
border: 0 !important;
border-radius: 9px !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1
.tpd-product-grid-pane
.tpd-mini-actions.tpd-mini-actions-info-only {
grid-template-columns: 1fr !important;
}
/* Grey View Details half */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-height: 40px !important;
padding: 8px 7px !important;
border: 0 !important;
border-radius: 0 !important;
background: #949493 !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 760 !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info:hover {
background: #858584 !important;
color: #fff !important;
}
/*
* Explicit Font Awesome icon treatment to match the main product catalogue.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-info-icon,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-cart-icon {
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 1px 0 0 !important;
color: inherit !important;
font-size: 10px !important;
line-height: 1 !important;
}
/* Green Buy / Order half */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart > * {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
width: 100% !important;
min-height: 40px !important;
margin: 0 !important;
padding: 8px 7px !important;
border: 0 !important;
border-radius: 0 !important;
background: #8bd000 !important;
background-color: #8bd000 !important;
background-image: none !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: 10px !important;
font-weight: 760 !important;
line-height: 1 !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a:hover,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button:hover,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn:hover {
background: #7abd00 !important;
background-color: #7abd00 !important;
}
/* --------------------------------------------------------------------------
Ex GST belongs with pricing, not below the action button
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-product-grid-pane .price {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: flex-end !important;
column-gap: 5px !important;
row-gap: 2px !important;
margin-bottom: 8px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_ex_tax {
flex: 0 0 100% !important;
display: block !important;
order: 99 !important;
width: 100% !important;
margin: 3px 0 0 !important;
padding: 0 !important;
color: #9299a1 !important;
font-size: 9.5px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-align: right !important;
}
/*
* If BurnEngine left an old tax placeholder below the moved cart node, don't
* let it reserve space.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .price-tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .tb_price_tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .tb_ex_tax {
display: none !important;
}
/* Mobile */
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn {
min-height: 38px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn {
font-size: 9px !important;
}
}
/* ==========================================================================
V0.2.1 — price above actions + single-line Ex GST + uniform action height
========================================================================== */
/* --------------------------------------------------------------------------
PRICE POSITION / ALIGNMENT
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-product-grid-pane .price,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: flex-end !important;
width: 100% !important;
margin: auto 0 8px !important;
padding-top: 10px !important;
border-top: 1px solid #e6e9ec !important;
color: #20242a !important;
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-align: right !important;
}
/*
* Current/old prices stay on the first line.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-new,
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-old,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_new,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_old {
flex: 0 0 auto !important;
}
/*
* Ex GST gets its own full-width row directly under the main price,
* but must remain a single visual line.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_ex_tax {
flex: 0 0 100% !important;
display: block !important;
width: 100% !important;
margin: 4px 0 0 !important;
padding: 0 !important;
color: #9299a1 !important;
font-size: 9.5px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-align: right !important;
white-space: nowrap !important;
overflow: visible !important;
}
/* --------------------------------------------------------------------------
ACTION BAR — force uniform height on every card, including first card
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
width: 100% !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 9px !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart > *,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn {
box-sizing: border-box !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 40px !important;
}
/* Use flex centering without allowing native line-height/padding to enlarge it. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart .btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding-left: 7px !important;
padding-right: 7px !important;
line-height: 1 !important;
}
/*
* Explicitly crush any first-child/native widget special-case styling.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .row > *:first-child .tpd-mini-actions,
html.tinks-product-detail-v1 .tpd-product-grid-pane .row > *:first-child .tpd-mini-info,
html.tinks-product-detail-v1 .tpd-product-grid-pane .row > *:first-child .tpd-mini-cart,
html.tinks-product-detail-v1 .tpd-product-grid-pane .row > *:first-child .tpd-mini-cart > *,
html.tinks-product-detail-v1 .tpd-product-grid-pane .row > *:first-child .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .row > *:first-child .tpd-mini-cart button {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Mobile */
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-info,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart > *,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart a,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart button {
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
}
}
/* ==========================================================================
V0.2.2 — catalogue-style price stack / divider placement
========================================================================== */
/*
* The divider belongs immediately after the description, at the top of the
* pricing area — not beneath the action bar.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .price,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
justify-content: flex-start !important;
width: 100% !important;
margin: auto 0 10px !important;
padding: 11px 0 0 !important;
border-top: 1px solid #e3e6e9 !important;
border-bottom: 0 !important;
color: #171a1f !important;
font-size: 20px !important;
font-weight: 850 !important;
line-height: 1.05 !important;
text-align: right !important;
}
/* Current/main price */
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-new,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_new,
html.tinks-product-detail-v1 .tpd-product-grid-pane .price > strong,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price > strong {
display: block !important;
width: 100% !important;
margin: 0 !important;
color: #111418 !important;
font-size: 20px !important;
font-weight: 850 !important;
line-height: 1.05 !important;
text-align: right !important;
}
/* Old/RRP price remains above the current price when present */
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-old,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_old {
display: block !important;
width: 100% !important;
margin: 0 0 3px !important;
color: #9299a1 !important;
font-size: 10px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
text-align: right !important;
}
/* Ex GST: one right-aligned line immediately below the main price */
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_tax,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_ex_tax {
display: block !important;
flex: none !important;
width: 100% !important;
margin: 5px 0 0 !important;
padding: 0 !important;
color: #8c949d !important;
font-size: 10px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
text-align: right !important;
white-space: nowrap !important;
overflow: visible !important;
}
/*
* No divider or inherited bottom border is allowed below the joined buttons.
* This removes the horizontal rule currently visible beneath the actions.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-actions + *,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tpd-mini-cart,
html.tinks-product-detail-v1 .tpd-product-grid-pane .button-group,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_button_add_to_cart {
border-bottom: 0 !important;
}
/*
* BurnEngine often leaves a rule on the caption/card content shell.
* Suppress it when it occurs after our action bar.
*/
html.tinks-product-detail-v1
.tpd-product-grid-pane
[data-tpd-actions="1"]
.caption {
border-bottom: 0 !important;
}
html.tinks-product-detail-v1
.tpd-product-grid-pane
[data-tpd-actions="1"]
.tpd-mini-actions:last-child {
margin-bottom: 0 !important;
}
/*
* Extra defensive override for native hr / pseudo separators located after
* the action bar.
*/
html.tinks-product-detail-v1 .tpd-product-grid-pane [data-tpd-actions="1"] hr {
display: none !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane [data-tpd-actions="1"]::after {
border: 0 !important;
background: none !important;
}
/* Mobile scales the price down just slightly. */
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-product-grid-pane .price,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price,
html.tinks-product-detail-v1 .tpd-product-grid-pane .price-new,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_price_new {
font-size: 18px !important;
}
}
/* ==========================================================================
V0.2.3 — accessory-price DOM fix / divider relocation / no hover lift
========================================================================== */
/* --------------------------------------------------------------------------
1. REMOVE HOVER SHADOW / LIFT
The View Details button now provides the interaction cue, so the accessory,
related-item and spare-part cards should remain visually stationary.
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product,
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb:hover,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product:hover,
html.tinks-product-detail-v1 .tpd-accessories-pane .product-thumb:hover,
html.tinks-product-detail-v1 .tpd-related-pane .product-thumb:hover,
html.tinks-product-detail-v1 .tpd-spare-parts-pane .product-thumb:hover {
transform: none !important;
translate: none !important;
box-shadow: none !important;
filter: none !important;
}
/* --------------------------------------------------------------------------
2. HIDE THE NATIVE BURNENGINE SEPARATOR AFTER THE CAPTION
Actual DOM:
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1
.tpd-product-grid-pane
.product-thumb[data-tpd-actions="1"]
> div
> span.clear.border,
html.tinks-product-detail-v1
.tpd-product-grid-pane
.product-thumb[data-tpd-actions="1"]
> div
> span.tb_mt_20.tb_mb_20.border,
html.tinks-product-detail-v1
.tpd-product-grid-pane
.tb_product[data-tpd-actions="1"]
span.clear.border {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* --------------------------------------------------------------------------
3. ACTUAL ACCESSORY PRICE CONTAINER
BurnEngine uses:
...
Ex GST...
Put the divider here so it appears immediately after the description.
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
justify-content: flex-start !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 10px 0 10px !important;
padding: 12px 0 0 !important;
border-top: 1px solid #e3e6e9 !important;
border-bottom: 0 !important;
text-align: right !important;
}
/* Main price — dark, larger, strong, right aligned */
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #171a1f !important;
-webkit-text-fill-color: #171a1f !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1.05 !important;
text-align: right !important;
white-space: nowrap !important;
}
/*
* BurnEngine splits currency / integer / decimal into nested spans.
* Let them inherit the same strong price styling rather than their old theme.
*/
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular
.tb_currency,
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular
.tb_integer {
color: #171a1f !important;
-webkit-text-fill-color: #171a1f !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1.05 !important;
}
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular
.tb_decimal_point,
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular
.tb_decimal {
color: #171a1f !important;
-webkit-text-fill-color: #171a1f !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
vertical-align: super !important;
}
/* Ex GST — one line directly below the main price, still right aligned */
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-tax,
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.tpd-mini-tax {
display: block !important;
width: 100% !important;
margin: 5px 0 0 !important;
padding: 0 !important;
color: #8c949d !important;
-webkit-text-fill-color: #8c949d !important;
font-size: 10px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
text-align: right !important;
white-space: nowrap !important;
}
/*
* Cancel older generic price rules that could leave the accessory-price
* paragraph behaving as normal inline text.
*/
html.tinks-product-detail-v1
.tpd-product-grid-pane
.caption
> p.accessory-price {
float: none !important;
clear: both !important;
min-height: 0 !important;
}
/* --------------------------------------------------------------------------
4. ACTION BAR FOLLOWS PRICE DIRECTLY
-------------------------------------------------------------------------- */
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
+ .tpd-mini-actions {
margin-top: 0 !important;
}
/* Mobile */
@media (max-width: 800px) {
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular,
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular
.tb_currency,
html.tinks-product-detail-v1
.tpd-product-grid-pane
p.accessory-price
.price-regular
.tb_integer {
font-size: 18px !important;
}
}
/* ==========================================================================
V0.2.4 — remove duplicate BurnEngine cart pseudo-icon
========================================================================== */
html.tinks-product-detail-v1
.tpd-product-grid-pane
.tpd-mini-cart
a.ico-mdi::before,
html.tinks-product-detail-v1
.tpd-product-grid-pane
.tpd-mini-cart
button.ico-mdi::before,
html.tinks-product-detail-v1
.tpd-product-grid-pane
.tpd-mini-cart
a[class*="ico-mdi-cart"]::before,
html.tinks-product-detail-v1
.tpd-product-grid-pane
.tpd-mini-cart
button[class*="ico-mdi-cart"]::before {
display: none !important;
content: none !important;
}
/* ==========================================================================
V0.2.5 — dedicated mobile product-detail layout
========================================================================== */
@media (max-width: 800px) {
/* ------------------------------------------------------------------------
PAGE / TITLE
------------------------------------------------------------------------ */
html.tinks-product-detail-v1 #content.tpd-content {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
padding: 22px 18px 30px !important;
overflow-x: hidden !important;
}
html.tinks-product-detail-v1 .tpd-hero,
html.tinks-product-detail-v1 .tpd-hero > .row,
html.tinks-product-detail-v1 .tpd-product-heading,
html.tinks-product-detail-v1 .tpd-media-col,
html.tinks-product-detail-v1 .tpd-summary-col {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/*
* Give the heading clear separation from the fixed/mobile header and allow
* very long commercial product names to wrap naturally.
*/
html.tinks-product-detail-v1 .tpd-product-heading {
display: block !important;
margin: 0 !important;
padding: 14px 4px 16px !important;
overflow: visible !important;
}
html.tinks-product-detail-v1 .tpd-product-heading .tpd-title-block,
html.tinks-product-detail-v1 .tpd-product-heading .tpd-title-block h1 {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html.tinks-product-detail-v1 .tpd-product-heading .tpd-title-block h1 {
margin: 0 !important;
font-size: clamp(25px, 7.2vw, 34px) !important;
line-height: 1.08 !important;
letter-spacing: -.025em !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
html.tinks-product-detail-v1 .tpd-meta {
width: 100% !important;
max-width: 100% !important;
margin: 8px 0 0 !important;
}
/* ------------------------------------------------------------------------
MOBILE GALLERY
------------------------------------------------------------------------ */
html.tinks-product-detail-v1 .tpd-media-col {
padding: 8px 0 18px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--tpd-line) !important;
}
html.tinks-product-detail-v1 .tpd-gallery,
html.tinks-product-detail-v1 .tpd-gallery #product_images,
html.tinks-product-detail-v1 .tpd-gallery .tb_slides {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/*
* Desktop BurnEngine gallery dimensions are much too tall on a phone.
* Give the hero image a predictable square-ish stage that scales with the
* viewport and lets background-size:contain do the rest.
*/
html.tinks-product-detail-v1 .tpd-gallery #product_images,
html.tinks-product-detail-v1 .tpd-gallery .tb_slides {
height: min(88vw, 520px) !important;
min-height: 300px !important;
max-height: 520px !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_slides > li,
html.tinks-product-detail-v1 .tpd-gallery .tb_slides > div,
html.tinks-product-detail-v1 .tpd-gallery .mSCover {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
inset: 0 !important;
}
html.tinks-product-detail-v1 .tpd-gallery .mSCover {
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_fullscreen_button {
top: 10px !important;
right: 10px !important;
width: 42px !important;
height: 42px !important;
}
/*
* Thumbnails become a horizontal strip directly under the hero image.
*/
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs_wrap {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
width: max-content !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs li {
flex: 0 0 72px !important;
box-sizing: border-box !important;
width: 72px !important;
height: 72px !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs li a,
html.tinks-product-detail-v1 .tpd-gallery .tb_thumbs li img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* ------------------------------------------------------------------------
SUMMARY / OPTIONS / PRICE / AVAILABILITY
------------------------------------------------------------------------ */
html.tinks-product-detail-v1 .tpd-summary-col {
padding: 18px 0 24px !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-summary-col > *,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group,
html.tinks-product-detail-v1 .tpd-purchase-card,
html.tinks-product-detail-v1 .tpd-availability-card,
html.tinks-product-detail-v1 .tpd-tabs-card {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/*
* Kill desktop multi-column/min-width behaviour inside grey information
* cards. Everything stacks within the phone viewport.
*/
html.tinks-product-detail-v1 .tpd-purchase-card > .row,
html.tinks-product-detail-v1 .tpd-availability-card > .row,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group > .row {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card > .row > .col,
html.tinks-product-detail-v1 .tpd-availability-card > .row > .col,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group > .row > .col {
float: none !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card,
html.tinks-product-detail-v1 .tpd-availability-card {
padding: 18px !important;
border-radius: 14px !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card input,
html.tinks-product-detail-v1 .tpd-purchase-card select,
html.tinks-product-detail-v1 .tpd-purchase-card button,
html.tinks-product-detail-v1 .tpd-purchase-card label,
html.tinks-product-detail-v1 .tpd-availability-card *,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group * {
max-width: 100% !important;
}
/*
* Long signed-in/customer messages must wrap instead of making the card
* wider than the viewport.
*/
html.tinks-product-detail-v1 .tpd-summary-col h1,
html.tinks-product-detail-v1 .tpd-summary-col h2,
html.tinks-product-detail-v1 .tpd-summary-col h3,
html.tinks-product-detail-v1 .tpd-summary-col h4,
html.tinks-product-detail-v1 .tpd-summary-col p,
html.tinks-product-detail-v1 .tpd-summary-col li,
html.tinks-product-detail-v1 .tpd-summary-col label,
html.tinks-product-detail-v1 .tpd-summary-col span,
html.tinks-product-detail-v1 .tpd-summary-col a {
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/* ------------------------------------------------------------------------
MOBILE TABS -> ACCORDION
------------------------------------------------------------------------ */
html.tinks-product-detail-v1 .tpd-tabs-card {
border-radius: 14px !important;
overflow: hidden !important;
}
/* Desktop tab strip disappears on phones. */
html.tinks-product-detail-v1 .tpd-tabs-nav {
display: none !important;
}
html.tinks-product-detail-v1 .tpd-tabs-card .tab-content {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-accordion-toggle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 18px !important;
border: 0 !important;
border-bottom: 1px solid #dfe3e7 !important;
border-radius: 0 !important;
background: #e9eaeb !important;
color: #343a41 !important;
box-shadow: none !important;
font: inherit !important;
font-size: 16px !important;
font-weight: 750 !important;
line-height: 1.2 !important;
text-align: left !important;
cursor: pointer !important;
}
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="true"] {
background: #ffffff !important;
color: #20242a !important;
box-shadow: inset 4px 0 0 var(--tpd-green) !important;
}
html.tinks-product-detail-v1 .tpd-accordion-chevron {
flex: 0 0 10px !important;
width: 10px !important;
height: 10px !important;
border-right: 2px solid #68717d !important;
border-bottom: 2px solid #68717d !important;
transform: rotate(45deg) !important;
transition: transform .15s ease !important;
}
html.tinks-product-detail-v1
.tpd-accordion-toggle[aria-expanded="true"]
.tpd-accordion-chevron {
transform: rotate(225deg) !important;
}
html.tinks-product-detail-v1 .tpd-tab-pane {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden !important;
}
html.tinks-product-detail-v1 .tpd-tab-pane.tpd-mobile-collapsed {
display: none !important;
}
html.tinks-product-detail-v1 .tpd-description,
html.tinks-product-detail-v1 .tpd-specifications-pane,
html.tinks-product-detail-v1 .tpd-product-grid-pane {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 18px !important;
overflow-x: hidden !important;
}
html.tinks-product-detail-v1 .tpd-description *,
html.tinks-product-detail-v1 .tpd-specifications-pane *,
html.tinks-product-detail-v1 .tpd-product-grid-pane * {
max-width: 100% !important;
}
html.tinks-product-detail-v1 .tpd-description p,
html.tinks-product-detail-v1 .tpd-description li,
html.tinks-product-detail-v1 .tpd-description h1,
html.tinks-product-detail-v1 .tpd-description h2,
html.tinks-product-detail-v1 .tpd-description h3,
html.tinks-product-detail-v1 .tpd-description h4,
html.tinks-product-detail-v1 .tpd-description td,
html.tinks-product-detail-v1 .tpd-description th {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
/* Specification tables scroll within themselves if genuinely too wide. */
html.tinks-product-detail-v1 .tpd-specifications-pane table {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed !important;
}
html.tinks-product-detail-v1 .tpd-specifications-pane td,
html.tinks-product-detail-v1 .tpd-specifications-pane th {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
}
/* Accordion controls are mobile-only. */
@media (min-width: 801px) {
html.tinks-product-detail-v1 .tpd-accordion-toggle {
display: none !important;
}
}
/* ==========================================================================
V0.2.6 — mobile accordion colour correction
All accordion headers remain white; only the open section gets the
Tink's green active indicator.
========================================================================== */
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-accordion-toggle,
html.tinks-product-detail-v1 .tpd-accordion-toggle:hover,
html.tinks-product-detail-v1 .tpd-accordion-toggle:focus,
html.tinks-product-detail-v1 .tpd-accordion-toggle:active,
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="false"],
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="false"]:hover,
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="false"]:focus,
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="true"],
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="true"]:hover,
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="true"]:focus {
background: #ffffff !important;
color: #20242a !important;
box-shadow: none !important;
outline: none !important;
}
html.tinks-product-detail-v1 .tpd-accordion-toggle {
border-bottom: 1px solid #dfe3e7 !important;
}
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="true"] {
box-shadow: inset 5px 0 0 var(--tpd-green) !important;
}
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="true"] .tpd-accordion-chevron {
border-color: var(--tpd-green) !important;
}
html.tinks-product-detail-v1 .tpd-accordion-toggle[aria-expanded="false"] .tpd-accordion-chevron {
border-color: #68717d !important;
}
}
/* ==========================================================================
V0.2.7 — mobile specification flush layout + full-width related grids
========================================================================== */
@media (max-width: 800px) {
/* ------------------------------------------------------------------------
SPECIFICATIONS — table fills accordion body edge-to-edge
------------------------------------------------------------------------ */
html.tinks-product-detail-v1 .tpd-specifications-pane,
html.tinks-product-detail-v1 .tpd-specifications-pane.active,
html.tinks-product-detail-v1 .tpd-specifications-pane.in {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
/* BurnEngine attribute widget itself must not reintroduce an inset. */
html.tinks-product-detail-v1 .tpd-specifications-pane > .tb_wt,
html.tinks-product-detail-v1 .tpd-specifications-pane > [id^="ProductAttributesSystem_"],
html.tinks-product-detail-v1 .tpd-specifications-pane .tb_wt_product_attributes_system,
html.tinks-product-detail-v1 .tpd-specifications-pane .panel-body {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
html.tinks-product-detail-v1 .tpd-specifications-pane table {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border-radius: 0 !important;
table-layout: fixed !important;
}
/* Keep useful cell breathing room; remove only the outer pane inset. */
html.tinks-product-detail-v1 .tpd-specifications-pane th,
html.tinks-product-detail-v1 .tpd-specifications-pane td {
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
/* Section/group headings should also span the full width. */
html.tinks-product-detail-v1 .tpd-specifications-pane tr > th[colspan],
html.tinks-product-detail-v1 .tpd-specifications-pane .tb_attr_group,
html.tinks-product-detail-v1 .tpd-specifications-pane .tb_group_title {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ------------------------------------------------------------------------
ACCESSORIES / RELATED ITEMS / SPARE PARTS — full panel-body card width
------------------------------------------------------------------------ */
html.tinks-product-detail-v1 .tpd-product-grid-pane,
html.tinks-product-detail-v1 .tpd-product-grid-pane.active,
html.tinks-product-detail-v1 .tpd-product-grid-pane.in {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
/* Keep a modest panel inset; cards themselves now consume all of it. */
padding: 16px !important;
}
html.tinks-product-detail-v1 .tpd-product-grid-pane .panel-body,
html.tinks-product-detail-v1 .tpd-product-grid-pane > .panel-body,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_wt,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_wt > .panel-body {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Remove Bootstrap/BurnEngine row negative margins and desktop gutters. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .row,
html.tinks-product-detail-v1 .tpd-product-grid-pane [class*="tb_gut_"] {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Every grid item is one full-width row on a phone. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .row > [class*="col-"],
html.tinks-product-detail-v1 .tpd-product-grid-pane [class*="col-xs-"],
html.tinks-product-detail-v1 .tpd-product-grid-pane [class*="col-sm-"],
html.tinks-product-detail-v1 .tpd-product-grid-pane [class*="col-md-"],
html.tinks-product-detail-v1 .tpd-product-grid-pane [class*="col-lg-"] {
float: none !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 16px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Card fills the exact width supplied by panel-body. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product,
html.tinks-product-detail-v1 .tpd-product-grid-pane [data-tpd-actions="1"] {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Preserve the comfortable inner padding we established on the cards. */
html.tinks-product-detail-v1 .tpd-product-grid-pane .product-thumb > div,
html.tinks-product-detail-v1 .tpd-product-grid-pane .tb_product > div,
html.tinks-product-detail-v1 .tpd-product-grid-pane .caption {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
V0.2.8 — mobile gallery thumbnails + member-only price-card cleanup
========================================================================== */
@media (max-width: 800px) {
/* ------------------------------------------------------------------------
ACTUAL BURNENGINE THUMBNAIL DOM
------------------------------------------------------------------------ */
/*
* BurnEngine uses:
*
* directly inside ProductImagesSystem. Earlier rules targeted tb_thumbs,
* which is not the structure used on this product template.
*/
html.tinks-product-detail-v1 .tpd-gallery > ul.thumbnails,
html.tinks-product-detail-v1 .tpd-gallery ul.thumbnails {
display: flex !important;
flex-flow: row nowrap !important;
gap: 8px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 10px 0 0 !important;
padding: 0 0 4px !important;
list-style: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
}
html.tinks-product-detail-v1 .tpd-gallery ul.thumbnails > li {
display: block !important;
flex: 0 0 74px !important;
box-sizing: border-box !important;
width: 74px !important;
max-width: 74px !important;
min-width: 74px !important;
height: 74px !important;
min-height: 74px !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
html.tinks-product-detail-v1 .tpd-gallery ul.thumbnails > li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 74px !important;
height: 74px !important;
margin: 0 !important;
padding: 5px !important;
border: 1px solid #dfe3e7 !important;
border-radius: 8px !important;
background: #ffffff !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1 .tpd-gallery ul.thumbnails > li > a:hover,
html.tinks-product-detail-v1 .tpd-gallery ul.thumbnails > li.active > a {
border-color: #b9c1c8 !important;
box-shadow: none !important;
}
html.tinks-product-detail-v1 .tpd-gallery ul.thumbnails img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
margin: 0 !important;
object-fit: contain !important;
}
/* ------------------------------------------------------------------------
PRICE CARD
------------------------------------------------------------------------ */
/*
* Restore the same visual inset used on desktop. V0.2.5's generic mobile
* column reset removed this padding after the earlier purchase-card rules.
*/
html.tinks-product-detail-v1
.tpd-purchase-card > .row > .col:nth-child(2) {
padding: 18px 22px !important;
border: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
background: #f5f6f7 !important;
}
html.tinks-product-detail-v1 .tpd-price,
html.tinks-product-detail-v1 .tpd-price .price {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/*
* Products without quantity / Buy controls should not retain a completely
* empty second purchase column. This is the source of the lower outlined
* rectangle seen on member-only/reservation products.
*/
html.tinks-product-detail-v1
.tpd-purchase-card > .row > .tpd-empty-buy-col {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/*
* Once the empty action column is gone, do not retain desktop row height.
*/
html.tinks-product-detail-v1 .tpd-purchase-card > .row {
min-height: 0 !important;
height: auto !important;
}
html.tinks-product-detail-v1 .tpd-purchase-card {
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
}
}
/* ==========================================================================
V0.2.9 — correct BurnEngine mobile thumbnail strip
The plain is the fallback OpenCart gallery.
BurnEngine's live selector is:
.tb_thumbs_wrap > .tb_thumbs > .mSFrame > ul.tb_listing
========================================================================== */
@media (max-width: 800px) {
/* Hide the fallback/native OpenCart thumbnail list on phones. */
html.tinks-product-detail-v1 .tpd-gallery > ul.thumbnails,
html.tinks-product-detail-v1 .tpd-gallery ul.thumbnails {
display: none !important;
}
/* Restore the actual BurnEngine thumbnail wrapper. */
html.tinks-product-detail-v1 .tpd-gallery #product_images .tb_thumbs_wrap {
display: block !important;
position: relative !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
height: 82px !important;
min-height: 82px !important;
margin: 10px 0 0 !important;
padding: 0 !important;
padding-top: 0 !important;
overflow: hidden !important;
visibility: visible !important;
opacity: 1 !important;
}
html.tinks-product-detail-v1 .tpd-gallery #product_images .tb_thumbs {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: 82px !important;
min-height: 82px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
visibility: visible !important;
opacity: 1 !important;
}
/*
* MightySlider's frame is what was collapsing to zero height.
* Give that frame a real mobile height and allow horizontal scrolling.
*/
html.tinks-product-detail-v1 .tpd-gallery #product_images .tb_thumbs .mSFrame,
html.tinks-product-detail-v1 .tpd-gallery #product_images .tb_thumbs .has_slider {
display: block !important;
position: relative !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
height: 82px !important;
min-height: 82px !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
}
/*
* Keep MightySlider's horizontal strip but normalise its absurd desktop
* thumbnail widths (288px in the captured DOM) to phone-sized tiles.
*/
html.tinks-product-detail-v1
.tpd-gallery #product_images .tb_thumbs ul.tb_listing.mSSlideElement {
display: flex !important;
flex-flow: row nowrap !important;
gap: 8px !important;
position: relative !important;
left: auto !important;
top: auto !important;
width: max-content !important;
min-width: 100% !important;
height: 74px !important;
min-height: 74px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
list-style: none !important;
}
html.tinks-product-detail-v1
.tpd-gallery #product_images .tb_thumbs ul.tb_listing > li.mSSlide {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 74px !important;
box-sizing: border-box !important;
width: 74px !important;
min-width: 74px !important;
max-width: 74px !important;
height: 74px !important;
min-height: 74px !important;
margin: 0 !important;
padding: 5px !important;
border: 1px solid #dfe3e7 !important;
border-radius: 8px !important;
background: #ffffff !important;
overflow: hidden !important;
}
html.tinks-product-detail-v1
.tpd-gallery #product_images .tb_thumbs ul.tb_listing > li.mSSlide.active {
border-color: #9ca5ae !important;
box-shadow: inset 0 0 0 1px #9ca5ae !important;
}
html.tinks-product-detail-v1
.tpd-gallery #product_images .tb_thumbs ul.tb_listing > li.mSSlide img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
}
}
/* ==========================================================================
V0.3.3 — OPTIONS CARD CONTAINER OWNERSHIP
Move the rounded-box treatment to the parent BurnEngine BlockGroup and
remove the nested-card appearance from the generated options UI.
========================================================================== */
html.tinks-product-detail-v1 .tpd-options-card,
html.tinks-product-detail-v1 .tpd-options-card[id^="ProductOptionsSystem_"],
html.tinks-product-detail-v1 .tb_wt_product_options_system.tpd-options-card {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* The immediate BurnEngine block group that contains the option system
* becomes the visual card.
*/
html.tinks-product-detail-v1 .tb_wt_block_group:has(> .tpd-options-card),
html.tinks-product-detail-v1 .tb_wt_block_group:has(.tpd-options-card) {
margin-bottom: 14px !important;
padding: 0 !important;
border: 1px solid var(--tpd-line) !important;
border-radius: 14px !important;
background: #f4f5f5 !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* The generated inner content should fill the parent card without looking
like another rounded rectangle inside it. */
html.tinks-product-detail-v1 .tpd-options-ui {
margin: 0 !important;
padding: 18px 20px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* BurnEngine may add its own spacing/background to the nested option block. */
html.tinks-product-detail-v1 .tb_wt_block_group:has(.tpd-options-card) > .tpd-options-card,
html.tinks-product-detail-v1 .tb_wt_block_group:has(.tpd-options-card) .tpd-options-card {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Fallback for browsers/environments where :has() support is unavailable:
JS marks the owning block group. */
html.tinks-product-detail-v1 .tpd-options-parent-card {
margin-bottom: 14px !important;
padding: 0 !important;
border: 1px solid var(--tpd-line) !important;
border-radius: 14px !important;
background: #f4f5f5 !important;
box-shadow: none !important;
overflow: hidden !important;
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tb_wt_block_group:has(.tpd-options-card),
html.tinks-product-detail-v1 .tpd-options-parent-card {
border-radius: 14px !important;
}
}
/* ==========================================================================
V0.3.4 — SUMMARY CARD VERTICAL RHYTHM
Normalise the spacing between Options, Price, Availability and Tabs.
========================================================================== */
/*
* BurnEngine block groups carry their own vertical spacing, which made the
* gap below Options noticeably larger than the gaps between the cards below.
* Use one controlled rhythm for the whole right-hand summary stack.
*/
html.tinks-product-detail-v1 .tpd-summary-col {
--tpd-summary-gap: 10px;
}
html.tinks-product-detail-v1 .tpd-summary-col > .tb_wt_block_group,
html.tinks-product-detail-v1 .tpd-summary-col > .tpd-purchase-card,
html.tinks-product-detail-v1 .tpd-summary-col > .tpd-availability-card,
html.tinks-product-detail-v1 .tpd-summary-col > .tpd-tabs-card {
margin-top: 0 !important;
margin-bottom: var(--tpd-summary-gap) !important;
}
/* The Options parent was explicitly given 14px in V0.3.3; bring it into
the same rhythm as the rest of the summary stack. */
html.tinks-product-detail-v1 .tb_wt_block_group:has(.tpd-options-card),
html.tinks-product-detail-v1 .tpd-options-parent-card {
margin-top: 0 !important;
margin-bottom: var(--tpd-summary-gap) !important;
}
/*
* Some BurnEngine layouts wrap Price / Availability inside successive
* BlockGroups rather than exposing the card as the direct summary child.
* Remove their inherited top spacing as well.
*/
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group + .tb_wt_block_group,
html.tinks-product-detail-v1 .tpd-summary-col .tpd-purchase-card + .tb_wt_block_group,
html.tinks-product-detail-v1 .tpd-summary-col .tpd-availability-card + .tb_wt_block_group,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group + .tpd-purchase-card,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group + .tpd-availability-card,
html.tinks-product-detail-v1 .tpd-summary-col .tb_wt_block_group + .tpd-tabs-card {
margin-top: 0 !important;
}
/* The tab set is the last visual card in the summary stack. */
html.tinks-product-detail-v1 .tpd-summary-col > .tpd-tabs-card:last-child,
html.tinks-product-detail-v1 .tpd-summary-col > .tb_wt_block_group:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 800px) {
html.tinks-product-detail-v1 .tpd-summary-col {
--tpd-summary-gap: 10px;
}
}
/* ==========================================================================
V0.3.5 — AVAILABILITY + MEMBER ACTION LAYOUT
Desktop: BlockAvailability and BlockInstalled share one row when there is
enough room. Mobile/tablet: they remain stacked.
========================================================================== */
/* Keep the availability system itself free to become the layout container. */
html.tinks-product-detail-v1 .tpd-availability {
width: 100% !important;
}
/* Desktop / generous horizontal space. */
@media (min-width: 1100px) {
html.tinks-product-detail-v1 .tpd-availability:has(.tpd-block-availability):has(.tpd-block-installed) {
display: grid !important;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
column-gap: 24px !important;
align-items: start !important;
}
html.tinks-product-detail-v1 .tpd-block-availability,
html.tinks-product-detail-v1 .tpd-block-installed {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.tinks-product-detail-v1 .tpd-block-installed {
padding-left: 24px !important;
border-left: 1px solid var(--tpd-line) !important;
}
}
/* Ensure BurnEngine's original full-width button rows no longer create gaps. */
html.tinks-product-detail-v1 .tpd-block-installed .tpd-account-action-bar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 0 !important;
width: 100% !important;
margin: 14px 0 0 !important;
border: 1px solid #cfd5da !important;
border-radius: 9px !important;
overflow: hidden !important;
background: #fff !important;
}
html.tinks-product-detail-v1 .tpd-block-installed .tpd-account-action {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
min-height: 42px !important;
height: 42px !important;
padding: 0 18px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
background-image: none !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
}
/* Join Up — blue, left side. */
html.tinks-product-detail-v1 .tpd-block-installed .tpd-join-up,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-join-up:hover,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-join-up:focus,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-join-up:active {
background: #1687d9 !important;
background-color: #1687d9 !important;
border-right: 1px solid rgba(255,255,255,.34) !important;
color: #fff !important;
}
html.tinks-product-detail-v1 .tpd-block-installed .tpd-join-up:hover,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-join-up:focus {
background: #0f76c2 !important;
background-color: #0f76c2 !important;
}
/* Sign In — Tink's green, right side. */
html.tinks-product-detail-v1 .tpd-block-installed .tpd-sign-in,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-sign-in:hover,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-sign-in:focus,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-sign-in:active {
background: var(--tpd-green) !important;
background-color: var(--tpd-green) !important;
color: #fff !important;
}
html.tinks-product-detail-v1 .tpd-block-installed .tpd-sign-in:hover,
html.tinks-product-detail-v1 .tpd-block-installed .tpd-sign-in:focus {
background: var(--tpd-green-dark) !important;
background-color: var(--tpd-green-dark) !important;
}
/* BurnEngine may have left empty wrappers where the moved controls lived. */
html.tinks-product-detail-v1 .tpd-block-installed .btn-block:empty,
html.tinks-product-detail-v1 .tpd-block-installed .tb_button:empty,
html.tinks-product-detail-v1 .tpd-block-installed .tb_button_wrap:empty {
display: none !important;
}
/* Mobile / tablet: stack availability sections and retain the joined bar. */
@media (max-width: 1099px) {
html.tinks-product-detail-v1 .tpd-availability {
display: block !important;
}
html.tinks-product-detail-v1 .tpd-block-availability,
html.tinks-product-detail-v1 .tpd-block-installed {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
}
html.tinks-product-detail-v1 .tpd-block-installed {
margin-top: 18px !important;
}
}
@media (max-width: 520px) {
html.tinks-product-detail-v1 .tpd-block-installed .tpd-account-action {
min-height: 48px !important;
height: 48px !important;
font-size: 15px !important;
}
}
/* ==========================================================================
V0.3.6 — AVAILABILITY COLUMN ORDER CORRECTION
Desktop layout beneath the single "Available From" heading:
LEFT = store availability list
RIGHT = member/sign-in information + joined action bar
========================================================================== */
@media (min-width: 1100px) {
html.tinks-product-detail-v1 .tpd-availability:has(.tpd-block-availability):has(.tpd-block-installed) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-areas: "availability installed" !important;
column-gap: 26px !important;
align-items: stretch !important;
direction: ltr !important;
}
/* Store list — always left. */
html.tinks-product-detail-v1 .tpd-availability > .tpd-block-availability {
grid-area: availability !important;
grid-column: 1 !important;
grid-row: 1 !important;
order: 1 !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 26px 0 0 !important;
border: 0 !important;
border-right: 1px solid var(--tpd-line) !important;
text-align: left !important;
justify-self: stretch !important;
align-self: stretch !important;
}
html.tinks-product-detail-v1 .tpd-availability > .tpd-block-availability .panel-body,
html.tinks-product-detail-v1 .tpd-availability > .tpd-block-availability .tb_product_availability {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Member prompt / account controls — always right. */
html.tinks-product-detail-v1 .tpd-availability > .tpd-block-installed {
grid-area: installed !important;
grid-column: 2 !important;
grid-row: 1 !important;
order: 2 !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
text-align: left !important;
justify-self: stretch !important;
align-self: stretch !important;
}
html.tinks-product-detail-v1 .tpd-availability > .tpd-block-installed .install_box {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Keep the joined action bar visually attached to the installed message. */
html.tinks-product-detail-v1 .tpd-availability > .tpd-block-installed .tpd-account-action-bar {
margin-top: 14px !important;
margin-bottom: 0 !important;
}
}
/* ==========================================================================
V0.3.7b — vertically align availability + installed columns
========================================================================== */
@media (min-width: 801px) {
/* Keep the two halves aligned from their very top edge */
html.tinks-product-detail-v1
.tpd-availability-card #BlockAvailability,
html.tinks-product-detail-v1
.tpd-availability-card #BlockInstalled {
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start !important;
}
/* Remove spacing BurnEngine adds inside the right-hand block */
html.tinks-product-detail-v1
.tpd-availability-card #BlockInstalled > div,
html.tinks-product-detail-v1
.tpd-availability-card #BlockInstalled .tb_wt,
html.tinks-product-detail-v1
.tpd-availability-card #BlockInstalled .tb_wt_text,
html.tinks-product-detail-v1
.tpd-availability-card #BlockInstalled .panel-body {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Whichever element contains the actual title */
html.tinks-product-detail-v1
.tpd-availability-card #BlockInstalled
:is(h1,h2,h3,h4,h5,h6,p,strong):first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/*
* BurnEngine is still giving the right column a small inherited vertical
* offset. Pull the entire installed/customer block up to match Available From.
*/
html.tinks-product-detail-v1
.tpd-availability-card #BlockInstalled {
transform: translateY(-14px);
}
}