/* Colour preview "theme v2" (2026-10-28): loaded only with ?theme=new (1-day cookie agate_theme), see common/css.php.
   Palette from the logo: maroon = brand (menu bar, prices), warm gold = accent (ALL PRODUCTS, hover line,
   footer headings), black = every action button, ivory + white = calm background, charcoal footer. */
:root { --t2-maroon: #7a0a16; --t2-maroon-dark: #5c0711; --t2-gold: #c9962b; --t2-gold-soft: #f3e7cc; --t2-ink: #111111; --t2-ivory: #faf7f2; --t2-charcoal: #151515; }

/* Top bar: ivory, thin gold line */
html body .header-top { background: var(--t2-ivory) !important; border-bottom: 1px solid #ece4d6 !important; }

/* Menu bar: maroon with a thin gold line under it; links white, gold underline on hover */
html body .header-bottom { background: var(--t2-maroon) !important; border-bottom: 3px solid var(--t2-gold) !important; }
html body .main-navigation > ul > li > a { color: #ffffff !important; position: relative; }
html body .main-navigation > ul > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--t2-gold); transform: scaleX(0); transition: transform .2s ease; }
html body .main-navigation > ul > li > a:hover::after, html body .main-navigation > ul > li.active > a::after { transform: scaleX(1); }
html body .main-navigation > ul > li > a:hover { color: #ffffff !important; background: transparent !important; }

/* ALL PRODUCTS: warm gold with dark text (calmer than the old bright yellow) */
html body .categories_menu .categories_title { background: var(--t2-gold) !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: var(--t2-ink) !important; }
html body .header-bottom .categori_toggle::before { color: var(--t2-ink) !important; }

/* Search and cart: black buttons */
html body .search-btn button { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; }
html body .search-btn button:hover { background: #333333 !important; }
html body .cart-trigger { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; }
html body .cart-trigger:hover { background: #333333 !important; }
html body .cart-trigger .badge, html body .cart-trigger .cart-count, html body #cartTrigger span[class*="count"] { background: var(--t2-gold) !important; color: var(--t2-ink) !important; }

/* Buttons that were navy / gradient: plain black, square */
html body .black-btn { background: var(--t2-ink) !important; background-image: none !important; border-color: var(--t2-ink) !important; border-radius: 0 !important; }
html body .black-btn:hover { background: #333333 !important; }

/* Section headings: dark text, small gold bar instead of the maroon/yellow double bar */
html body .section-header .title { color: var(--t2-ink) !important; }
html body .section-header .title::after { background: var(--t2-gold) !important; height: 3px !important; }
html body .section-header .title::before { display: none !important; }

/* Soft ivory page sections */
html body .cms-support, html body .hb-why, html body .cp-alt { background: var(--t2-ivory) !important; }

/* Footer: charcoal, gold headings */
html body .cms-footer { background: var(--t2-charcoal) !important; }
html body .footer-trust-bar { background: #1c1c1c !important; border-color: rgba(201,150,43,.25) !important; }
html body .cms-footer h4 { color: var(--t2-gold) !important; }
html body .footer-bottom { background: #0d0d0d !important; }

/* Stronger selectors: the theme styles these with .header-mid .cart-trigger and .cms-banner .banner-txt h2 */
html body .header-mid #cartTrigger.cart-trigger, html body #cartTrigger.cart-trigger { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; }
html body .header-mid #cartTrigger.cart-trigger:hover { background: #333333 !important; }
html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2, html body section.cms-banner .banner-txt h2 * { color: var(--t2-ink) !important; }

/* Owner 2026-10-28: the gold ALL PRODUCTS block looked heavy -> black with white text (same black as the buttons),
   no gold line under the menu bar, white hover underline */
html body .categories_menu .categories_title { background: var(--t2-ink) !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #ffffff !important; }
html body .header-bottom .categori_toggle::before { color: #ffffff !important; }
html body .header-bottom { border-bottom: 0 !important; }
html body .main-navigation > ul > li > a::after { background: #ffffff !important; }

/* Maroon only for logo / menu bar / prices: "SHOP NOW" pills and other theme buttons square black, headings dark,
   no yellow / maroon frames around pictures and cards */
html body .theme-btn, html body a.theme-btn, html body .shop-now, html body .btn-shop, html body .cms-static-area a[class*="btn"], html body .cms-static-area .btn,
html body .cms-banner a[class*="btn"], html body .cms-special a[class*="btn"] {
  background: var(--t2-ink) !important; background-image: none !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; color: #ffffff !important;
}
html body .theme-btn:hover, html body .cms-static-area a[class*="btn"]:hover, html body .cms-banner a[class*="btn"]:hover { background: #333333 !important; }
html body .cms-about .title, html body .cms-about h1, html body .cms-about h2, html body .cms-home-about .title, html body .cms-home-about h2,
html body .cms-static-area h2, html body .cms-static-area h3, html body .cms-special h2, html body .cms-special .title { color: var(--t2-ink) !important; }
html body .cms-about .title::after, html body .cms-about h1::after { background: var(--t2-maroon) !important; }
html body .cms-about img, html body .cms-about .about-img, html body .cms-about .about-image, html body .cms-about [class*="img"],
html body .cms-static-area [class*="box"], html body .cms-static-area [class*="card"] { border-color: #e7e2da !important; }

/* Owner 2026-10-28: menu bar black as well; maroon stays only in the logo and prices. ALL PRODUCTS a shade lighter
   so it still stands out from the bar. */
html body .header-bottom { background: var(--t2-ink) !important; }
html body .categories_menu .categories_title { background: #2a2a2a !important; }
html body section.cms-about .about-content h1.title, html body section.cms-about .about-content .title, html body section.cms-about h1 { color: var(--t2-ink) !important; }
html body section.cms-about .about-content .title::after, html body section.cms-about h1::after { background: var(--t2-maroon) !important; }

/* Slider (laptops): picture bigger (58%), text box smaller (42%) with a smaller heading and the long text shortened to
   4 lines on screen (the full text stays in the page for Google), square black button */
@media (min-width: 992px) {
  html body section.cms-banner .item > .row > .col-lg-6:has(.banner-txt) { flex: 0 0 42% !important; max-width: 42% !important; }
  html body section.cms-banner .item > .row > .col-lg-6:has(.banner-img) { flex: 0 0 58% !important; max-width: 58% !important; }
  html body section.cms-banner .banner-txt { padding: 28px 30px !important; border-radius: 0 !important; box-shadow: none !important; border: 1px solid #ece6dc !important; }
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 30px !important; line-height: 1.2 !important; margin-bottom: 12px !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 15px !important; line-height: 1.6 !important; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden !important; margin-bottom: 16px !important; }
  html body section.cms-banner .banner-txt p ~ p { display: none !important; }
  html body section.cms-banner .banner-img img { width: 100% !important; height: auto !important; max-height: 520px; object-fit: cover; border-radius: 0 !important; }
}
html body section.cms-banner .banner-txt a.light-btn { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body section.cms-banner .banner-txt a.light-btn:hover { background: #333333 !important; }

/* Owner 2026-10-28 (liked it): black menu bar + amber ALL PRODUCTS with white text; maroon logo unchanged */
html body .categories_menu .categories_title { background: #e8a317 !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #ffffff !important; }
html body .header-bottom .categori_toggle::before { color: #ffffff !important; }

/* Owner 2026-10-28 try: ALL PRODUCTS white with black text on the black bar */
html body .categories_menu .categories_title { background: #ffffff !important; border: 1px solid #ffffff !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #111111 !important; }
html body .header-bottom .categori_toggle::before { color: #111111 !important; }

/* Final choice 2026-10-28 (owner liked it): amber ALL PRODUCTS with white text on the black bar; no maroon edge */
html body .categories_menu .categories_title { background: #e8a317 !important; border: 0 !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #ffffff !important; }
html body .header-bottom .categori_toggle::before { color: #ffffff !important; }
html body .header-bottom .categories_menu, html body .header-bottom .categories-menu-wrap_box, html body .header-bottom .categories_menu .categories_title::before { border-left: 0 !important; box-shadow: none !important; }

/* Slider balance: less empty space above, picture height capped so the text box does not look low */
@media (min-width: 992px) {
  html body section.cms-banner { padding-top: 28px !important; padding-bottom: 28px !important; }
  html body section.cms-banner .banner-img img { max-height: 440px !important; }
  html body section.cms-banner .item > .row { align-items: center !important; }
}
/* Slider picture: show the whole picture (no cropping), scaled to fit the 440 px height */
@media (min-width: 992px) {
  html body section.cms-banner .banner-img img { object-fit: contain !important; width: 100% !important; height: 440px !important; max-height: 440px !important; background: transparent !important; }
}
/* Slider text: show more (6 lines, 16 px) */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 16px !important; -webkit-line-clamp: 6 !important; line-height: 1.65 !important; }
}

/* Home sections in the new colours (stronger selectors than the theme): dark headings with a small maroon bar,
   tabs black / white square, every "VIEW ALL" button square black (no navy pill, no maroon hover), less empty space */
html body section .section-header h2.title, html body section .section-header .title { color: var(--t2-ink) !important; }
html body section .section-header h2.title::after, html body section .section-header .title::after { background: var(--t2-maroon) !important; }
html body section.cms-single-product, html body section.stone-list, html body section.cms-recommended { padding-top: 44px !important; padding-bottom: 44px !important; }
html body section .section-header { padding-bottom: 18px !important; }
html body section.cms-single-product ul.nav > li > a, html body section.cms-single-product [role="tablist"] > li > a, html body section.cms-single-product [role="tablist"] > a {
  background: #ffffff !important; background-image: none !important; color: var(--t2-ink) !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body section.cms-single-product ul.nav > li > a.active, html body section.cms-single-product [role="tablist"] > li > a.active, html body section.cms-single-product [role="tablist"] > a.active {
  background: var(--t2-ink) !important; color: #ffffff !important; }
html body section .btn-box a.black-btn, html body a.black-btn.black-btn, html body section .btn-box .black-btn {
  background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body section .btn-box a.black-btn:hover, html body a.black-btn.black-btn:hover { background: #333333 !important; background-image: none !important; border-color: #333333 !important; color: #ffffff !important; }
html body .light-btn:hover, html body a.light-btn:hover { background: #333333 !important; background-image: none !important; border-color: #333333 !important; }
/* style.css colours headings per section (section.cms-xxx .section-header .title !important): beat it with a doubled class */
html body section .section-header .title.title, html body section .section-header h2.title.title { color: var(--t2-ink) !important; }

/* Page check 2026-10-28 (20 pages, laptop + phone): remaining maroon / yellow / round elements */
html body h1.title.title, html body .section-header h1.title.title, html body .breadcrumb-area + * h1.title { color: var(--t2-ink) !important; }
html body h1.title::after { background: var(--t2-maroon) !important; }
html body a.cms-side-btn, html body .cms-side-btn { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; }
html body a.cms-side-btn:hover { background: #333333 !important; }
html body a.white-btn, html body .white-btn { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body a.white-btn:hover { background: #333333 !important; }
html body .pagination a, html body .pagination span, html body .pagination li a, html body ul.pagination > li > a {
  border-radius: 0 !important; background: #ffffff !important; background-image: none !important; color: var(--t2-ink) !important; border: 1px solid #d6d6d6 !important; box-shadow: none !important; }
html body .pagination .active a, html body .pagination li.active a {
  background: var(--t2-ink) !important; color: #ffffff !important; border-color: var(--t2-ink) !important; }
/* 404 page buttons */
html body .error-page a, html body .not-found a.primary, html body a.primary, html body section [class*="404"] a { border-radius: 0 !important; }
html body a.primary { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border-color: var(--t2-ink) !important; }

/* (fix) page numbers only inside real .pagination lists; active tab without a red outline */
html body section.cms-single-product ul.nav > li > a.active, html body section.cms-single-product ul.nav > li > a:focus { outline: none !important; box-shadow: none !important; border-color: var(--t2-ink) !important; }
/* Last items from the page check: language chip, mini-cart buttons, phone-menu search button */
html body .lang-switch .lang-opt.is-active { background: var(--t2-ink) !important; color: #ffffff !important; border-color: var(--t2-ink) !important; }
html body .mini-cart-btns a, html body .cart-btns a { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; }
html body .mini-cart-btns a:hover, html body .cart-btns a:hover { background: #333333 !important; }
html body .search-box-offcanvas .search-btn, html body button.search-btn { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; color: #ffffff !important; }
/* "Read more about Agate Export" (white-btn): square black also on hover (the theme hover made a round pill with yellow text) */
html body section a.white-btn.white-btn, html body section a.white-btn.white-btn:hover, html body section a.white-btn.white-btn:focus {
  border-radius: 0 !important; box-shadow: none !important; background-image: none !important; border: 1px solid var(--t2-ink) !important; }
html body section a.white-btn.white-btn { background: var(--t2-ink) !important; color: #ffffff !important; }
html body section a.white-btn.white-btn:hover, html body section a.white-btn.white-btn:focus { background: #333333 !important; color: #ffffff !important; }
html body section a.white-btn.white-btn * { color: #ffffff !important; }

/* Home "Wholesale Healing Crystals Points / Metaphysical Crystals" cards: square light frame, text and SHOP NOW
   stacked next to the picture, button on one line */
html body section.cms-static-area .single-static { border: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; gap: 26px !important; padding: 22px !important; background: #ffffff !important; }
html body section.cms-static-area .single-static:hover { border-color: #111111 !important; }
html body section.cms-static-area .single-static img { border-radius: 0 !important; max-width: 46% !important; height: auto !important; }
html body section.cms-static-area .single-static .content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 14px !important; text-align: left !important; flex: 1 1 auto; }
html body section.cms-static-area .single-static .content h2, html body section.cms-static-area .single-static .content h3, html body section.cms-static-area .single-static .content h4 { font-size: 22px !important; line-height: 1.3 !important; color: #111111 !important; margin: 0 !important; }
html body section.cms-static-area .single-static .btn-box { padding: 0 !important; margin: 0 !important; width: auto !important; }
html body section.cms-static-area .single-static a.light-btn { white-space: nowrap !important; display: inline-flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 24px !important; font-size: 13px !important; letter-spacing: .04em; }
@media (max-width: 767.98px) {
  html body section.cms-static-area .single-static { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 14px !important; }
  html body section.cms-static-area .single-static img { max-width: 100% !important; }
  html body section.cms-static-area .single-static .content h2, html body section.cms-static-area .single-static .content h3, html body section.cms-static-area .single-static .content h4 { font-size: 18px !important; }
}
/* New wide slider photos (3:2): fill the picture column, no letterbox */
@media (min-width: 992px) {
  html body section.cms-banner .banner-img img[src*="banner-v2"] { object-fit: cover !important; height: 440px !important; }
}
/* Slider arrows black (one was maroon) */
html body .owl-carousel .owl-nav button.owl-prev, html body .owl-carousel .owl-nav button.owl-next { background: var(--t2-ink) !important; color: #ffffff !important; border-radius: 0 !important; }
html body .owl-carousel .owl-nav button.owl-prev:hover, html body .owl-carousel .owl-nav button.owl-next:hover { background: #333333 !important; }

/* Product cards: Item Code / Size / MOQ as three small columns (grey label above, value below) instead of long
   label-left / value-right rows; one light frame, text centred, long codes wrap instead of "..." */
html body .product-detail-list ul { display: grid !important; grid-template-columns: 1.3fr 1fr 1fr !important; gap: 0 !important; padding: 0 !important; margin: 10px 0 12px !important; border: 1px solid #ececec !important; list-style: none !important; }
html body .product-detail-list ul li { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 7px 4px !important; border: 0 !important; border-right: 1px solid #ececec !important; margin: 0 !important; min-width: 0 !important; background: #ffffff !important; }
html body .product-detail-list ul li:last-child { border-right: 0 !important; }
html body .product-detail-list .list-label { font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #8a8f98 !important; margin: 0 0 2px !important; width: auto !important; }
html body .product-detail-list .list-value { font-size: 13px !important; font-weight: 700 !important; color: #111111 !important; text-align: center !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; line-height: 1.25 !important; width: auto !important; max-width: 100% !important; }
@media (max-width: 575.98px) {
  html body .product-detail-list ul { grid-template-columns: 1fr 1fr 1fr !important; }
  html body .product-detail-list .list-label { font-size: 9.5px !important; }
  html body .product-detail-list .list-value { font-size: 11.5px !important; }
}
/* (revised) card details: three short centred lines "LABEL value", no columns (cards are only ~190 px wide) */
html body .product-detail-list ul { display: block !important; border: 0 !important; border-top: 1px solid #efefef !important; border-bottom: 1px solid #efefef !important; padding: 6px 0 !important; margin: 8px 0 10px !important; }
html body .product-detail-list ul li { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 6px !important; border: 0 !important; padding: 2px 4px !important; }
html body .product-detail-list .list-label { font-size: 10.5px !important; margin: 0 !important; }
html body .product-detail-list .list-value, html body .product-detail-list .list-value-code { display: inline !important; font-size: 13px !important; }
@media (max-width: 575.98px) {
  html body .product-detail-list ul li { gap: 4px !important; padding: 1px 2px !important; }
  html body .product-detail-list .list-value, html body .product-detail-list .list-value-code { font-size: 11.5px !important; }
}
/* stronger than header-extras (body .single_product .product-detail-list ul li ...): centred "LABEL value" lines */
html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li.is-code { justify-content: center !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; flex-wrap: wrap !important; }
html body .single_product .product-detail-list ul li .list-label, html body .single_product .product-detail-list ul li.is-code .list-label { flex: 0 0 auto !important; width: auto !important; text-align: right !important; font-size: 10.5px !important; text-transform: uppercase !important; color: #8a8f98 !important; }
html body .single_product .product-detail-list ul li .list-value, html body .single_product .product-detail-list ul li.is-code .list-value { flex: 0 1 auto !important; width: auto !important; text-align: left !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; font-weight: 700 !important; color: #111111 !important; }
/* Page numbers (theme class "paginatoin-area"): square, white with grey frame, current page black */
html body .paginatoin-area ul li, html body .paginatoin-area ul li a { border-radius: 0 !important; }
html body .paginatoin-area ul li a { background: #ffffff !important; color: var(--t2-ink) !important; border: 1px solid #d6d6d6 !important; box-shadow: none !important; }
html body .paginatoin-area ul li a:hover { border-color: var(--t2-ink) !important; }
html body .paginatoin-area ul li.active, html body .paginatoin-area ul li.active a, html body .paginatoin-area ul li.active span { background: var(--t2-ink) !important; background-color: var(--t2-ink) !important; color: #ffffff !important; border-color: var(--t2-ink) !important; border-radius: 0 !important; }

/* Trust cards under the slider (7 days money back, fast dispatch ...): square light frame, readable on hover
   (the old hover turned the text almost white and the icon yellow), icons maroon */
html body section.cms-support .support-box { border: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; background: #ffffff !important; transform: none !important; }
html body section.cms-support .support-box:hover { border-color: #111111 !important; background: #ffffff !important; box-shadow: none !important; transform: none !important; }
html body section.cms-support .support-box p, html body section.cms-support .support-box:hover p, html body section.cms-support .support-box * { color: #111111 !important; }
html body section.cms-support .support-box .icon svg, html body section.cms-support .support-box .icon svg *, html body section.cms-support .support-box:hover .icon svg, html body section.cms-support .support-box:hover .icon svg * { fill: var(--t2-maroon) !important; }
html body section.cms-support { padding-top: 30px !important; padding-bottom: 30px !important; }
/* Slider text box as tall as the photo (440 px) with bigger text (owner 2026-10-28) */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt { min-height: 440px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 34px 38px !important; }
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 34px !important; line-height: 1.18 !important; margin-bottom: 16px !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 17px !important; line-height: 1.7 !important; -webkit-line-clamp: 7 !important; margin-bottom: 22px !important; }
  html body section.cms-banner .banner-txt a.light-btn { align-self: flex-start; font-size: 15px !important; padding: 14px 30px !important; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 29px !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 16px !important; -webkit-line-clamp: 6 !important; }
}
/* Slider text box exactly the photo height (440 px) on all laptop widths */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt { height: 440px !important; min-height: 440px !important; overflow: hidden !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { -webkit-line-clamp: 6 !important; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { -webkit-line-clamp: 5 !important; }
}

/* Product cards (owner 2026-10-28): item code as a small grey tag, Size and MOQ as two framed chips on one line;
   all cards the same light square frame, dark frame on hover */
html body .single_product { border: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
html body .single_product:hover { border-color: #111111 !important; box-shadow: none !important; }
html body .single_product .product-detail-list ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; border: 0 !important; padding: 0 !important; margin: 10px 0 12px !important; }
html body .single_product .product-detail-list ul li { flex: 0 0 auto !important; display: inline-flex !important; align-items: baseline !important; gap: 4px !important; padding: 4px 9px !important; margin: 0 !important; border: 1px solid #e3e3e3 !important; background: #ffffff !important; }
html body .single_product .product-detail-list ul li.is-code { flex: 0 0 100% !important; justify-content: center !important; border: 0 !important; padding: 0 0 2px !important; background: transparent !important; }
html body .single_product .product-detail-list ul li.is-code .list-label { display: none !important; }
html body .single_product .product-detail-list ul li.is-code .list-value { display: inline-block !important; background: #f2f2f2 !important; color: #444444 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .03em !important; padding: 3px 10px !important; }
html body .single_product .product-detail-list ul li:not(.is-code) .list-label { font-size: 10.5px !important; color: #8a8f98 !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
html body .single_product .product-detail-list ul li:not(.is-code) .list-value { font-size: 12.5px !important; font-weight: 700 !important; color: #111111 !important; white-space: nowrap !important; }
@media (max-width: 575.98px) {
  html body .single_product .product-detail-list ul { gap: 4px !important; }
  html body .single_product .product-detail-list ul li { padding: 3px 6px !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-value { font-size: 11.5px !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-label { font-size: 9.5px !important; }
}

/* Product cards v3 (owner 2026-10-28): details as ONE calm centred line "Arrow-050 · 1-2 Inch · MOQ 50 Pcs" (no tags / boxes),
   "$ Login" hover = underline only (the theme hover made a tight black block) */
html body .single_product .product-detail-list ul { display: block !important; text-align: center !important; border: 0 !important; border-top: 1px solid #efefef !important; padding: 8px 0 0 !important; margin: 8px 0 12px !important; line-height: 1.6 !important; }
html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li.is-code { display: inline !important; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
html body .single_product .product-detail-list ul li + li::before { content: " \00B7 "; color: #b5b5b5; font-weight: 400; padding: 0 3px; }
html body .single_product .product-detail-list ul li .list-label { display: none !important; }
html body .single_product .product-detail-list ul li:last-child .list-label { display: inline !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: #6b7280 !important; margin-right: 3px !important; }
html body .single_product .product-detail-list ul li .list-value, html body .single_product .product-detail-list ul li.is-code .list-value { display: inline !important; background: transparent !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #333333 !important; letter-spacing: 0 !important; white-space: nowrap !important; }
html body .single_product .product-detail-list ul li.is-code .list-value { color: #6b7280 !important; font-weight: 500 !important; }
html body .single_product a.login-price-link:hover, html body .single_product a.login-price-link:focus, html body .single_product .login-price-link:hover {
  background: transparent !important; color: var(--t2-maroon) !important; text-decoration: underline !important; box-shadow: none !important; outline: none !important; }
@media (max-width: 575.98px) {
  html body .single_product .product-detail-list ul li .list-value, html body .single_product .product-detail-list ul li.is-code .list-value { font-size: 11.5px !important; }
  html body .single_product .product-detail-list ul li:last-child .list-label { font-size: 11px !important; }
}
/* Slider text: 4 lines (ends with "...") so a 3-line heading never pushes the text out of the 440 px box */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; overflow: hidden !important; max-height: 6.9em !important; flex-shrink: 0; }
  html body section.cms-banner .banner-txt p br { display: none; }
}
@media (min-width: 1300px) and (max-width: 1599.98px) {
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 31px !important; }
}