/** Shopify CDN: Minification failed
Line 1455:0 Unexpected "}"
**/
/* ============================================================
OCTOPUS MEDIA SOLUTIONS — HORIZON THEME
custom.css.liquid | Dawn → Horizon Migration
§1 Font Loading (Google Sans + Noto Sans Thai stack)
§2 Horizon Variable Overrides
§3 Brand Tokens
§4 Typography
§5 Keyframe Animations
§6 Section Background Color Schemes
§7 Button System
§8 Utility Classes
§9 Components (language toggle, announce bar, cards, FAQ…)
§10 Dawn Legacy (GrandMenu, social icons, blog icons, ribbon…)
§11 Horizon Native Overrides (header, inputs, facets)
§11b → แยกออกเป็น 3 ไฟล์แล้ว:
oc-header-skin.css.liquid — glass · logo · menu · actions
oc-header-search.css.liquid — search input + magnifier
oc-lang-toggle.css.liquid — language toggle desktop + mobile
§12 Page-Specific (product, collection, header)
§13 Tables
§14 Scrollbar
§15 Media / Image Fixes
§16 Interactions & Micro-animations
============================================================ */
/* ============================================================
§1 FONT LOADING
Strategy: แยกชื่อ family + unicode-range
- 'Google Sans' → Latin, numbers, symbols (U+0000-00FF ฯลฯ)
- 'Noto Sans Thai' → Thai เท่านั้น (U+0E00-U+0E7F)
ทำไมต้องใช้ unicode-range:
Google Sans Thai มี Thai glyph ด้วย ถ้าไม่จำกัด browser
จะใช้ Google Sans render ภาษาไทยแทน Noto
ทำไมแยกชื่อ family (ไม่ใช้ชื่อเดียวกัน):
ป้องกัน conflict กับ @font-face ที่ Horizon inject ใน styles.css
============================================================ */
/* ── Google Sans — Latin, numbers, symbols เท่านั้น ── */
@font-face {
font-family: 'Google Sans';
src: url('//www.octopus.co.th/cdn/shop/t/131/assets/GoogleSans-Regular.woff2?v=82497405045130765961773672375') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Google Sans';
src: url('//www.octopus.co.th/cdn/shop/t/131/assets/GoogleSans-Bold.woff2?v=73337105064289060581772502603') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* ── Noto Sans Thai — Thai เท่านั้น ── */
@font-face {
font-family: 'Noto Sans Thai';
src: url('/cdn/shop/files/NotoSansThai-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0E00-U+0E7F;
}
@font-face {
font-family: 'Noto Sans Thai';
src: url('/cdn/shop/files/NotoSansThai-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0E00-U+0E7F;
}
/* ============================================================
§2 HORIZON VARIABLE OVERRIDES
============================================================ */
:root {
--color-background: 255, 255, 255;
--color-foreground: 26, 32, 44;
--color-shadow: 100, 100, 160;
--color-button: 23, 169, 187;
--color-button-text: 255, 255, 255;
--color-secondary-button: 243, 240, 255;
--color-secondary-button-text: 124, 58, 237;
--color-link: 23, 169, 187;
--media-radius: 14px;
--product-card-corner-radius: 1.4rem;
--buttons-radius: 99px;
--inputs-radius: 8px;
--page-width: 116rem;
--spacing-sections-desktop: 72px;
--spacing-sections-mobile: 48px;
--grid-desktop-vertical-spacing: 20px;
--grid-desktop-horizontal-spacing: 20px;
}
/* ============================================================
§3 BRAND TOKENS (Octopus CI)
============================================================ */
:root {
/* ── Cyan Duo ── */
--oc-cyan: #17a9bb;
--oc-cyan-d: #17a9bb;
--oc-cyan-vv: #14c9df;
--oc-cyan-l: #e3f8fb;
--oc-cyan-rgb: 23, 169, 187;
--oc-cyan-vv-rgb: 20, 201, 223;
--brand-cyan: #17a9bb;
--brand-cyan-vv: #14c9df;
--brand-bg: #f3f7fa;
/* ── Gradients ── */
--brand-grad-1: linear-gradient(140deg, rgba(241,236,255,1) 22%, rgba(235,252,255,0.85) 45%, rgba(236,255,254,0.81) 74%, rgba(242,255,250,1) 100%);
--brand-grad-2: linear-gradient(177deg, #c3f9ff 0%, #c78ff2 100%);
--oc-grad: linear-gradient(120deg, #CCFBF1 0%, #E0E7FF 50%, #EDE9FE 100%);
--oc-grad-btn: linear-gradient(90deg, #14c9df, #17a9bb, #818CF8, #A78BFA);
--oc-grad-btn-rev: linear-gradient(90deg, #A78BFA, #818CF8, #17a9bb, #14c9df);
--oc-grad-ci: linear-gradient(135deg, #14c9df, #17a9bb);
--oc-rainbow: linear-gradient(90deg, #14c9df 0%, #17a9bb 28%, #818CF8 58%, #A78BFA 82%, #14c9df 100%);
--oc-rainbow-size: 300% 100%;
/* ── Purple ── */
--oc-purple: #A78BFA;
--oc-purple-d: #7C3AED;
--oc-purple-l: #F3F0FF;
--oc-purple-rgb: 124, 58, 237;
/* ── Ink Scale ── */
--oc-ink: #1A202C;
--oc-ink-70: #374151;
--oc-ink-40: #6B7280;
--oc-ink-15: #E5E7EB;
--oc-ink-05: #F9FAFB;
/* ── Glass / Blur ── */
--oc-glass: rgba(255, 255, 255, 0.72);
--oc-glass-strong: rgba(255, 255, 255, 0.90);
--oc-glass-subtle: rgba(255, 255, 255, 0.45);
--oc-glass-border: rgba(255, 255, 255, 0.55);
--oc-glass-border-subtle: rgba(200, 200, 240, 0.35);
--oc-blur: blur(20px) saturate(160%);
--oc-blur-strong: blur(28px) saturate(180%);
/* ── Shadow ── */
--oc-shadow-sm: 0 2px 16px rgba(100, 100, 160, 0.08);
--oc-shadow-md: 0 8px 32px rgba(100, 100, 160, 0.14);
--oc-shadow-lg: 0 20px 60px rgba(100, 100, 160, 0.18);
--oc-shadow-glow-cyan: 0 4px 20px rgba(20, 201, 223, 0.30), 0 1px 6px rgba(23, 169, 187, 0.20);
--oc-shadow-glow-purple: 0 4px 24px rgba(124, 58, 237, 0.3);
/* ── Radius ── */
--oc-radius-sm: 8px;
--oc-radius: 14px;
--oc-radius-lg: 22px;
--oc-radius-xl: 32px;
--oc-radius-pill: 999px;
/* ── Motion ── */
--oc-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--oc-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--oc-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--oc-dur-fast: 0.15s;
--oc-dur-base: 0.25s;
--oc-dur-slow: 0.45s;
--oc-dur-xslow: 0.75s;
/* ── Header ── */
--oc-header-h-hero: 220px;
--oc-header-h-slim: 64px;
--oc-announce-h: 40px;
/* ── Pill Glass (blog/collection filter) ── */
--oc-pill-glass-bg: rgba(20, 201, 223, 0.10);
--oc-pill-glass-border: rgba(20, 201, 223, 0.25);
--oc-pill-glass-hover-bg: rgba(20, 201, 223, 0.10);
--oc-pill-glass-hover-border: rgba(20, 201, 223, 0.70);
--oc-pill-glass-hover-color: #17a9bb;
}
/* ============================================================
§4 TYPOGRAPHY
============================================================ */
:root {
--font-paragraph--size: 0.9375rem;
--font-h4--size: clamp(1rem, 1.8vw, 1.25rem);
--font-h3--size: clamp(1.125rem, 2vw, 1.5rem);
--font-h2--size: clamp(1.25rem, 2.5vw, 2rem);
--font-h1--size: clamp(1.75rem, 3vw, 2.4rem);
--font-hero--size: clamp(2rem, 5vw, 4rem);
--font-sm--size: 0.8125rem;
--font-xs--size: 0.75rem;
}
/* [CLEANUP] ลบได้เมื่อ Liquid ทุกไฟล์ใช้ var(--font-body--family) แทน inline font-family
ตรวจ: theme.liquid, header.liquid, collection.liquid, blog.liquid */
@media (max-width: 767px) {
html, body,
.c-menu-wrapper, .categories .c-menu-wrapper a,
.blog .c-menu-wrapper, .collection_link,
.sub_col_h3, .layout_block, .categories {
font-family: var(--font-body--family);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
a { text-decoration: none; }
/* ── em / i → animated rainbow
เว็บนี้ไม่ใช้ตัวเอียง — override ให้ render เป็น rainbow text แทนทันที
⚠️ ถ้ามี component อื่น override font-style:italic ทับ ให้เพิ่ม !important ที่นั่นแทน ── */
em, i {
font-style: normal !important;
background: var(--oc-rainbow);
background-size: var(--oc-rainbow-size);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: oc-rainbow-text 5s linear infinite;
display: inline;
}
u {
display: inline-block; /* ← สำคัญมาก */
padding: 0px;
padding-left: 5px;
padding-right: 5px;
background: linear-gradient(108deg,rgba(223,213,254,.7) 0%,rgba(215,252,240,.7) 100%);
text-decoration: none; /* ตัด underline เส้นเดิมออก */
}
.desc_container span[style*="underline"] {
display: inline-block;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
background: linear-gradient(108deg,rgba(223,213,254,.7) 0%,rgba(215,252,240,.7) 100%);
text-decoration: none !important;
}
/* ── Global letter-spacing ── */
* { letter-spacing: 0.03em; }
h1, h2, h3, h4 { letter-spacing: 0; }
.tiny { font-size: 0.8rem; line-height: 1.6rem; font-weight: 700; }
.prod_h2 { font-size: 1.4rem; line-height: 1.8rem; }
.prod_h4 { font-size: 1.2rem; line-height: 1.6rem; }
.field__label {
font-size: 11px;
letter-spacing: 0;
font-weight: 700;
top: 13px;
}
.accordion .details__header {
font-family: var(--font-body--family) !important;
font-weight: 700 !important;
}
/* ============================================================
§5 KEYFRAME ANIMATIONS
============================================================ */
@keyframes oc-rainbow-move {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes oc-rainbow-text {
0% { background-position: 0% center; }
100% { background-position: 300% center; }
}
@keyframes oc-announce-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes oc-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes oc-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes oc-scale-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
@keyframes oc-float-in {
from { opacity: 0; transform: translateY(20px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes oc-orb-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(30px, 20px) scale(1.06); }
}
@keyframes oc-badge-pulse {
0% { transform: scale(1); }
55% { transform: scale(1.15); }
100% { transform: scale(1.06); }
}
.oc-card-grid > * {
animation: oc-fade-up 0.4s var(--oc-ease-expo) both;
}
.oc-card-grid > *:nth-child(1) { animation-delay: 0.04s; }
.oc-card-grid > *:nth-child(2) { animation-delay: 0.08s; }
.oc-card-grid > *:nth-child(3) { animation-delay: 0.12s; }
.oc-card-grid > *:nth-child(4) { animation-delay: 0.16s; }
.oc-card-grid > *:nth-child(5) { animation-delay: 0.20s; }
.oc-card-grid > *:nth-child(6) { animation-delay: 0.24s; }
.oc-card-grid > *:nth-child(7) { animation-delay: 0.28s; }
.oc-card-grid > *:nth-child(8) { animation-delay: 0.32s; }
.oc-card-grid > *:nth-child(9) { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
§6 SECTION BACKGROUND COLOR SCHEMES
============================================================ */
/* ── Shopify Admin Color Scheme Overrides ── */
.color-scheme-1,
[data-color-scheme="scheme-1"] {
--gradient-background: linear-gradient(140deg, rgba(241, 236, 255, 1) 22%, rgba(235, 252, 255, 0.85) 45%, rgba(236, 255, 254, 0.81) 74%, rgba(242, 255, 250, 1) 100%);
background: var(--gradient-background) !important;
background-color: transparent !important;
}
.color-scheme-1 .section-background {
background: var(--gradient-background) !important;
}
.color-scheme-3 .section-background,
[data-color-scheme="scheme-3"] {
background: linear-gradient(177deg, #c3f9ff 0%, #c78ff2 100%);
}
.color-scheme-4 .section-background,
[data-color-scheme="scheme-4"] {
background: var(--oc-grad-btn-rev);
background-size: 200% 100%;
animation: oc-rainbow-move 8s ease infinite;
}
/* ── Section Utility Classes ── */
.oc-section-white { background: var(--oc-surface-white); }
.oc-section-soft { background: var(--oc-surface-soft); }
.oc-section-tint { background: var(--oc-surface-tint); }
.oc-section-warm { background: var(--brand-grad-warm); }
.oc-section-canvas {
background: linear-gradient(140deg,
rgba(241, 236, 255, 1) 22%,
rgba(235, 252, 255, 0.85) 45%,
rgba(236, 255, 254, 0.81) 74%,
rgba(242, 255, 250, 1) 100%
);
}
.oc-section-vivid { background: linear-gradient(177deg, #c3f9ff 0%, #c78ff2 100%); }
.oc-section-dark { background: var(--oc-surface-dark); }
.oc-section-dark-teal { background: var(--oc-surface-dark-teal); }
.oc-section-rainbow {
background: var(--oc-grad-btn-rev);
background-size: 200% 100%;
animation: oc-rainbow-move 8s ease infinite;
}
/* ============================================================
§7 BUTTON SYSTEM
============================================================ */
.button,
.button--primary,
button.shopify-payment-button__button--unbranded {
border-radius: var(--oc-radius-pill);
font-family: var(--font-body--family);
font-weight: 700;
transition: transform var(--oc-dur-fast),
box-shadow var(--oc-dur-base),
background-position var(--oc-dur-base);
}
.button--primary,
button.shopify-payment-button__button--unbranded {
background: var(--oc-grad-btn) !important;
background-size: 200% 100% !important;
color: #fff !important;
border: none !important;
}
/* ── Secondary Button ── */
.button--secondary,
.button-secondary {
background: var(--brand-grad-2) !important;
color: var(--oc-ink) !important;
border-radius: var(--oc-radius-pill) !important;
border: none !important;
}
/* ── Utility gradient button ── */
.oc-btn-grad {
color: #fff;
background: var(--oc-grad-btn);
background-size: 200% 100%;
border: none;
border-radius: var(--oc-radius-pill);
padding: 10px 24px;
font-weight: 700;
cursor: pointer;
transition: background-position var(--oc-dur-base) ease,
transform var(--oc-dur-fast) ease,
box-shadow var(--oc-dur-base) ease;
}
.oc-btn-grad:hover {
background-position: 100% 0;
transform: translateY(-1px);
box-shadow: var(--oc-shadow-glow-cyan);
}
/* ── Outline button ── */
.oc-btn-outline {
background: #fff;
color: var(--oc-ink-70);
border: 1.5px solid var(--oc-ink-15);
border-radius: var(--oc-radius-pill);
padding: 10px 24px;
font-weight: 700;
cursor: pointer;
transition: border-color var(--oc-dur-base), color var(--oc-dur-base);
}
.oc-btn-outline:hover {
border-color: var(--oc-purple);
color: var(--oc-purple-d);
box-shadow: 0 0 12px rgba(124, 58, 237, 0.15);
}
/* ── LINE CTA button ── */
.oc-btn-line {
background: #06C755;
color: #fff;
border: none;
border-radius: var(--oc-radius-pill);
padding: 10px 24px;
font-weight: 700;
cursor: pointer;
transition: filter var(--oc-dur-fast), transform var(--oc-dur-fast);
}
.oc-btn-line:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
/* ── Legacy gradient class ── */
/* [CLEANUP] Legacy Dawn gradient class — ลบได้เมื่อ Liquid ใช้ .btn-p แทนทั้งหมด */
.buttongradient {
color: #252525;
background: linear-gradient(156deg, rgba(205,188,255,0.7) 0%, rgba(208,255,240,0.85) 100%);
font-weight: 700;
padding: 8px 15px;
border-radius: var(--oc-radius-pill);
}
/* ── Variant / Quantity Selector ── */
.variant-option--buttons,
.variant-option--equal-width-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
.variant-option__button-label {
flex: 0 1 auto !important;
width: fit-content !important;
min-width: 48px !important;
padding-inline: 16px !important;
justify-content: center !important;
min-height: 2.0em;
border-radius: 999px;
background: #ffffff;
border: 1.5px solid #d9eaf2;
color: #1a2a35;
transition: all .2s ease;
}
input[type="radio"]:checked + .variant-option__button-label {
background: #ffffff !important;
color: #17a9bb !important;
border: 1.5px solid #17a9bb !important;
box-shadow: 0 0 0 2px rgba(23,169,187,0.10);
}
.variant-option__button-label:hover {
border-color: #17a9bb;
}
.variant-option--equal-width-buttons .variant-option__button-label {
min-width: fit-content !important;
}
.variant-option--buttons legend { font-weight: 700; }
@media screen and (min-width: 750px) {
.quantity-selector input[type='number'] {
font-weight: 700;
font-size: 18px;
}
}
@media screen and (max-width: 749px) {
.variant-option__button-label {
min-height: 0 !important;
height: auto !important;
flex: 0 1 auto !important;
padding: 4px 12px !important;
}
.variant-option__button-label__text {
padding: 0 !important;
margin: 0 !important;
line-height: 1.2 !important;
font-size: 13px !important;
}
}
.quantity-selector {
display: flex !important;
min-height: 44px !important;
align-items: stretch !important;
justify-content: space-between !important;
overflow: hidden !important;
border: 1.5px solid var(--oc-ink-15) !important;
border-radius: 999px !important;
background-color: #fff !important;
width: 100% !important;
max-width: 140px !important;
}
.quantity-selector input[type='number'] {
border: none !important;
background: transparent !important;
box-shadow: none !important;
text-align: center !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
outline: none !important;
-moz-appearance: textfield !important;
}
.quantity-selector input[type='number']::-webkit-outer-spin-button,
.quantity-selector input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.quantity-selector .quantity-minus,
.quantity-selector .quantity-plus {
background: transparent !important;
box-shadow: none !important;
border: none !important;
width: 44px !important;
height: auto !important;
min-width: unset !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--oc-ink) !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transform: none !important;
}
.quantity-selector .quantity-minus:hover,
.quantity-selector .quantity-plus:hover {
background: rgba(0, 0, 0, 0.05) !important;
color: var(--oc-ink) !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
.quantity-selector .quantity-minus::after,
.quantity-selector .quantity-plus::after,
.quantity-selector .quantity-minus::before,
.quantity-selector .quantity-plus::before {
display: none !important;
box-shadow: none !important;
}
/*
.close-button,
.drawer__close {
background: transparent !important;
box-shadow: none !important;
border: none !important;
width: 40px !important;
height: 40px !important;
min-width: unset !important;
}
.close-button:hover,
.drawer__close:hover {
background: rgba(0, 0, 0, 0.05) !important;
transform: scale(1.1) !important;
box-shadow: none !important;
border-radius: 50% !important;
}
*/
/* ============================================================
§8 UTILITY CLASSES
============================================================ */
@media (max-width: 749px) {
.oc-desktop-only, .only-desktop { display: none !important; }
}
@media (min-width: 750px) {
.oc-mobile-only, .only-mobile { display: none !important; }
}
@media (max-width: 989px) {
.oc-lg-only { display: none !important; }
}
/* ── Rainbow Text ── */
.oc-rainbow-text {
background: var(--oc-rainbow);
background-size: var(--oc-rainbow-size);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: oc-rainbow-text 5s linear infinite;
display: inline-block;
}
/* ── Background helpers ── */
.oc-bg-grad { background: var(--oc-grad); }
.oc-bg-grad-v { background: var(--brand-grad-1); }
.oc-bg-glass {
background: var(--oc-glass);
backdrop-filter: var(--oc-blur);
-webkit-backdrop-filter: var(--oc-blur);
border: 1px solid var(--oc-glass-border-subtle);
}
/* ── Rainbow Highlight ── */
.oc-highlight,
.rainbowBG,
.rainbow-highlight-bg {
background: linear-gradient(108deg, rgba(223,213,254,0.7) 0%, rgba(215,252,240,0.7) 100%);
padding: 2px 8px;
border-radius: 4px;
}
/* ── Gray Box ── */
/* [CLEANUP] .grayBG / .whiteBG / .home-paragraph = legacy Dawn HTML */
.oc-box-gray,
.grayBG,
.home-paragraph {
color: var(--oc-ink);
background: #EAEDF2;
margin: 10px 0;
padding: 15px;
border-radius: var(--oc-radius-sm);
}
.grayBG p { margin: 8px 0; }
/* ── White box ── */
.whiteBG {
background: #fff;
margin: 0 10px 10px 10px;
padding: 0 15px 15px 15px;
}
/* ── Badges ── */
.oc-badge-cyan {
background: var(--oc-cyan-l);
color: var(--oc-cyan-d);
border: 1px solid rgba(23, 169, 187, 0.3);
border-radius: var(--oc-radius-pill);
padding: 2px 10px;
font-size: var(--font-xs--size);
font-weight: 700;
display: inline-block;
}
.oc-badge-purple {
background: var(--oc-purple-l);
color: var(--oc-purple-d);
border: 1px solid rgba(124, 58, 237, 0.25);
border-radius: var(--oc-radius-pill);
padding: 2px 10px;
font-size: var(--font-xs--size);
font-weight: 700;
display: inline-block;
}
/* ── Pill Glass ── */
.oc-pill-glass {
display: inline-flex;
align-items: center;
padding: 8px 18px;
border-radius: var(--oc-radius-pill);
border: 1.5px solid var(--oc-pill-glass-border);
background: var(--oc-pill-glass-bg);
color: var(--oc-ink-70);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.oc-pill-glass:hover {
background: var(--oc-pill-glass-hover-bg);
border-color: var(--oc-pill-glass-hover-border);
color: var(--oc-pill-glass-hover-color);
box-shadow: 0 0 12px rgba(20, 201, 223, 0.20);
}
.oc-pill-glass.active {
background: var(--oc-btn-rainbow-bg);
background-size: 200%;
border-color: transparent;
color: #fff;
animation: oc-rainbow-move 3s linear infinite;
}
/* ── Dividers ── */
.divline,
.head-line {
border-top: none;
border-bottom: 1px solid #EAEDF2;
display: block;
}
/* ── RTE list ── */
.rte li { list-style: initial; }
/* ── Product card image ratio ── */
.ratio { --ratio-percent: 75.241% !important; }
/* ── Screen-reader only ── */
.oc-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
§9 COMPONENTS
============================================================ */
/* ── §9a Language Toggle (Legacy Dawn switch) ── */
.switch_language {
display: inline-flex;
align-items: center;
}
.switch_language .switch {
position: relative;
font-size: 13px;
}
.switch_language .check-toggle {
position: absolute;
visibility: hidden;
}
input[type="checkbox"] {
display: inline-block;
width: auto;
margin-right: .5rem;
}
.switch_language input.check-toggle-round-flat + label {
padding: 2px;
width: 75px;
height: 30px;
background-color: #f9fafc;
border-radius: 60px;
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.switch_language .check-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
}
.switch_language input.check-toggle-round-flat + label::before {
top: 2px; left: 2px; bottom: 2px; right: 2px;
border-radius: 60px;
}
.switch_language input.check-toggle-round-flat + label::before,
.switch_language input.check-toggle-round-flat + label::after {
display: block;
position: absolute;
content: "";
}
.switch_language input.check-toggle-round-flat:checked + label::after {
margin-left: 36px;
}
.switch_language input.check-toggle-round-flat + label::after {
top: 3px; left: 3px; bottom: 3px;
width: 34px;
background-color: var(--oc-cyan-d);
border-radius: 52px;
transition: margin .2s;
}
.switch_language input.check-toggle-round-flat:checked ~ .on { color: #707070; }
.switch_language .switch > span.on { padding-left: 5px; color: #fff; }
.switch_language .switch > span {
position: absolute;
top: 3px;
pointer-events: none;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,.06);
width: 45%;
text-align: center;
}
.switch_language input.check-toggle-round-flat:checked ~ .off { color: #fff; }
.switch_language .switch > span.off {
right: 0;
padding-right: 4px;
color: #707070;
}
/* ── §9b Announce Bar ── */
.shopify-section-group-header-group .announcement-bar,
.oc-announce-bar {
background: var(--brand-grad-2) !important;
background-size: 100% 200% !important;
animation: oc-announce-shift 8s ease-in-out infinite;
color: var(--oc-ink-70) !important;
border-bottom: 1px solid rgba(20, 201, 223, 0.15);
min-height: var(--oc-announce-h);
}
/* ── §9c Breadcrumb ── */
.oc-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-xs--size);
color: var(--oc-ink-40);
flex-wrap: wrap;
}
.oc-breadcrumb a { color: var(--oc-ink-40); text-decoration: none; }
.oc-breadcrumb a:hover { color: var(--oc-cyan-d); }
.oc-breadcrumb-sep { color: var(--oc-ink-15); }
/* ── §9d FAQ (GEO / rich snippet) ── */
.oc-faq-item { border-bottom: 1px solid var(--oc-ink-15); }
.oc-faq-question {
font-weight: 700;
color: var(--oc-ink);
padding: 16px 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.oc-faq-answer {
color: var(--oc-ink-70);
font-size: var(--font-paragraph--size);
line-height: 1.75;
padding-bottom: 16px;
}
/* ── §9e Sticky Contact Bar ── */
.oc-sticky-contacts {
position: fixed;
right: 0;
bottom: 120px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 0;
width: 50px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background: linear-gradient(108deg, rgba(223,213,254,0.7) 0%, rgba(215,252,240,0.7) 100%);
backdrop-filter: var(--oc-blur);
-webkit-backdrop-filter: var(--oc-blur);
align-items: center;
}
.oc-sticky-btn {
width: 40px; height: 45px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: block;
cursor: pointer;
position: relative;
}
.oc-sticky-divider {
width: 28px; height: 1px;
background: var(--oc-glass-border);
}
@media (max-width: 749px) {
.oc-sticky-contacts {
bottom: 0;
right: 0; left: 0;
flex-direction: row;
justify-content: center;
border-radius: 0;
border-top: 1px solid var(--oc-ink-15);
padding: 6px 16px;
width: 100%;
height: 60px;
}
.oc-sticky-divider { width: 1px; height: 28px; margin: 0 4px; }
}
/* Legacy social wrapper (Dawn) */
/* [CLEANUP §10c] Legacy .social-wrapper */
.position-fixed.social-wrapper.bottom_social {
padding: 10px 0;
bottom: 125px !important;
width: 50px;
height: 195px;
position: fixed;
right: 0;
z-index: 999;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
justify-content: center;
align-items: stretch;
margin-right: 0;
background: linear-gradient(108deg, rgba(223,213,254,0.7) 0%, rgba(215,252,240,0.7) 100%);
backdrop-filter: blur(2rem);
-webkit-backdrop-filter: blur(2rem);
}
@media (max-width: 749px) {
.position-fixed.social-wrapper.bottom_social {
padding-top: 8px;
bottom: 0 !important;
width: 100%;
height: 60px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display: flex;
}
}
@media (max-width: 600px) {
.position-fixed.social-wrapper.bottom_social {
display: flex;
height: 70px;
}
}
/* ── §9f Background Blobs ── */
.oc-bg-blob {
position: fixed;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
z-index: 0;
animation: oc-orb-drift 14s ease-in-out infinite alternate;
}
.oc-bg-blob-1 {
width: 700px; height: 700px;
top: -150px; left: -120px;
background: radial-gradient(circle, rgba(195,249,255,0.5), transparent 70%);
}
.oc-bg-blob-2 {
width: 600px; height: 600px;
top: 25%; right: -180px;
background: radial-gradient(circle, rgba(199,143,242,0.2), transparent 70%);
animation-delay: -6s;
}
.oc-bg-blob-3 {
width: 500px; height: 500px;
bottom: 15%; left: 25%;
background: radial-gradient(circle, rgba(20,201,223,0.16), transparent 70%);
animation-delay: -10s;
}
/* ── §9g Product recommendations mobile fix ── */
@media screen and (max-width: 749px) {
.product-recommendations .card-gallery,
product-recommendations .card-gallery,
.product-details .card-gallery { overflow: hidden; }
.product-recommendations .card-gallery slideshow-component,
product-recommendations .card-gallery slideshow-component,
.product-details .card-gallery slideshow-component {
display: block !important;
width: 100% !important;
}
.product-recommendations .card-gallery slideshow-container,
product-recommendations .card-gallery slideshow-container,
.product-details .card-gallery slideshow-container {
display: block !important;
width: 100% !important;
overflow: hidden !important;
}
.product-recommendations .card-gallery slideshow-slides,
product-recommendations .card-gallery slideshow-slides,
.product-details .card-gallery slideshow-slides {
display: flex !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
width: 100% !important;
gap: 0 !important;
}
.product-recommendations .card-gallery slideshow-slide,
product-recommendations .card-gallery slideshow-slide,
.product-details .card-gallery slideshow-slide {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
.product-recommendations .card-gallery img,
product-recommendations .card-gallery img,
.product-details .card-gallery img {
width: 100% !important;
height: auto !important;
display: block !important;
}
}
/* ============================================================
§9h COMPONENTS — Named Classes
============================================================ */
/* ── Buttons (shorthand aliases) ── */
.btn-p {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
background: var(--oc-grad-btn); background-size: 200% 100%;
color: #fff; border: none; border-radius: var(--oc-radius-pill);
padding: 10px 22px; font-family: var(--font-body--family);
font-size: 13px; font-weight: 700; cursor: pointer;
text-decoration: none; white-space: nowrap;
box-shadow: 0 2px 8px rgba(60, 70, 90, .10);
transition: background-position var(--oc-dur-base), transform var(--oc-dur-fast), box-shadow var(--oc-dur-base);
}
.btn-p:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: var(--oc-shadow-glow-cyan); }
.btn-p.sm { padding: 7px 16px; font-size: 12px; }
.btn-s {
display: inline-flex; align-items: center; justify-content: center;
background: #111; color: #fff; border: none; border-radius: var(--oc-radius-pill);
padding: 10px 22px; font-family: var(--font-body--family);
font-size: 13px; font-weight: 700; white-space: nowrap;
cursor: pointer; text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
transition: all .25s;
}
.btn-s:hover { background: #2a2a2a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .26); }
.btn-s.sm { padding: 7px 16px; font-size: 12px; }
.btn-r {
display: inline-flex; align-items: center;
background: var(--oc-btn-rainbow-bg); background-size: 200% 100%;
color: #fff; border: none; border-radius: var(--oc-radius-pill);
padding: 9px 22px; font-family: var(--font-body--family);
font-size: 12px; font-weight: 600; cursor: pointer; transition: all .25s;
}
.btn-r:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(129, 140, 248, .30); }
.btn-g {
display: inline-flex; align-items: center;
background: transparent; color: var(--oc-cyan);
border: 1.5px solid rgba(23, 169, 187, .35); border-radius: var(--oc-radius-pill);
padding: 9px 20px; font-family: var(--font-body--family);
font-size: 12px; font-weight: 600; white-space: nowrap;
cursor: pointer; transition: all .25s;
}
.btn-g:hover {
background: rgba(23, 169, 187, .08); border-color: var(--oc-cyan);
transform: translateY(-1px); box-shadow: 0 0 12px rgba(20, 201, 223, .20);
}
/* ── Pill Row ── */
.oc-pill-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oc-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 18px; border-radius: var(--oc-radius-pill);
background: rgba(0, 0, 0, .05);
color: var(--oc-ink); text-decoration: none;
font-size: 13px; font-weight: 600; white-space: nowrap;
border: none; cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s;
}
.oc-pill:hover { background: rgba(20, 201, 223, .10); color: var(--oc-cyan); }
.oc-pill.active {
background: var(--oc-grad-ci); color: #fff;
box-shadow: 0 2px 10px rgba(20, 201, 223, .35);
}
/* ── Sub Rect Nav Row ── */
.oc-subnav-row { display: flex; align-items: stretch; gap: 12px; }
.oc-subnav-bar {
width: 3px; border-radius: 99px;
background: var(--oc-grad-ci); flex-shrink: 0;
}
.oc-subnav-items {
display: flex; gap: 6px; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none;
padding-bottom: 2px; flex: 1;
}
.oc-subnav-items::-webkit-scrollbar { display: none; }
.oc-subnav-item {
display: inline-flex; align-items: center; white-space: nowrap;
padding: 4px 14px; border-radius: 7px;
font-size: 13px; font-weight: 400;
background: rgba(20, 201, 223, .10); color: var(--oc-cyan);
cursor: pointer; flex-shrink: 0;
transition: background var(--oc-dur-fast), text-shadow var(--oc-dur-fast);
}
.oc-subnav-item:hover {
background: rgba(20, 201, 223, .20);
text-shadow: 0 0 .5px var(--oc-cyan);
}
.oc-subnav-item.active {
background: var(--oc-btn-rainbow-bg); background-size: 200% 100%;
animation: oc-rainbow-move 3s linear infinite;
color: #fff; font-weight: 600;
}
/* ── Heading Style A ── */
.oc-hd {
display: block; position: relative;
padding-bottom: 10px; margin-bottom: 0;
color: var(--oc-cyan);
font-family: var(--font-body--family); font-weight: 700;
}
.oc-hd::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 100%; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, #c3f9ff 0%, #c78ff2 100%);
}
.oc-hd.ci::after { background: var(--oc-grad-ci); }
.oc-hd.short::after { width: 50%; }
/* ── Heading Style B ── */
.oc-hd-bar { display: flex; flex-direction: column; gap: 8px; }
.oc-kicker { font-size: 12px; color: var(--oc-cyan); font-weight: 600; }
.oc-bar-wrap { display: flex; align-items: stretch; gap: 12px; }
.oc-bar {
width: 3px; min-height: 32px; border-radius: 99px;
background: var(--oc-grad-ci); flex-shrink: 0; align-self: stretch;
}
.oc-keyword { color: var(--oc-cyan); }
/* ── Badge ── */
.oc-badge {
display: inline-block; padding: 3px 10px;
border-radius: var(--oc-radius-pill);
font-size: 11px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
}
.oc-badge-ci { background: var(--oc-grad-ci); color: #fff; }
.oc-badge-rainbow { background: var(--oc-btn-rainbow-bg); background-size: 200%; color: #fff; animation: oc-rainbow-move 4s linear infinite; }
.oc-badge-orange { background: #fff3e0; color: #e65100; }
.oc-badge-green { background: #e8f5e9; color: #2e7d32; }
.oc-badge-red { background: #fdecea; color: #c62828; }
.oc-badge-pink { background: #fce4ec; color: #ad1457; }
.oc-badge-yellow { background: #fffde7; color: #f57f17; }
/* ── Feature Strip ── */
.oc-feat-strip {
display: flex; flex-wrap: wrap; gap: 10px;
padding: 16px 20px; background: #fff;
border-radius: 12px; border: 1px solid rgba(20, 201, 223, .12);
}
.oc-feat-item {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 600; color: var(--oc-ink);
}
.oc-feat-icon {
width: 26px; height: 26px; border-radius: 7px;
background: rgba(23, 169, 187, .10);
display: grid; place-items: center;
font-size: 13px; flex-shrink: 0;
}
/* ── Order Step Timeline ── */
.oc-step-row {
display: flex; flex-wrap: wrap; gap: 0;
align-items: flex-start; justify-content: center;
}
.oc-step-item {
display: flex; flex-direction: column; align-items: center;
gap: 8px; flex: 1; min-width: 80px; max-width: 130px;
}
.oc-step-bubble { position: relative; width: 64px; height: 64px; }
.oc-step-num {
position: absolute; top: -10px; left: -10px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--oc-grad-ci); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; z-index: 1;
box-shadow: 0 2px 6px rgba(20, 201, 223, .30);
}
.oc-step-icon {
width: 64px; height: 64px; border-radius: 14px;
background: #f3f4f6; border: 1.5px solid #e5e7eb;
display: flex; align-items: center; justify-content: center;
}
.oc-step-icon img { width: 68%; height: 68%; object-fit: contain; }
.oc-step-label {
font-size: 12px; font-weight: 600;
color: var(--oc-ink); text-align: center; line-height: 1.4;
}
.oc-step-arrow {
flex-shrink: 0; display: flex; align-items: center;
padding-bottom: 28px; color: var(--oc-cyan);
font-size: 16px;
}
/* ============================================================
§10 DAWN LEGACY
============================================================ */
/* [CLEANUP §10a] Dawn header fixes
.header__heading-link { padding: 0; }
── §10b GrandMenu Overrides ──
.gm-submenu.gm-mega { width: 810px !important; }
.gm-submenu.gm-mega.gm-submenu-bordered { max-height: 595px !important; }
body.gm-menu-installed .gm-menu.gm-menu-37243 .gm-item.gm-level-0 > .gm-target {
padding: 8px 10px !important;
}
body.gm-menu-installed .gm-menu .gm-grid-item { padding: 0 5px; }
body.gm-menu-installed .gm-menu ul {
list-style: none;
padding: 5px;
margin: 0;
}
.gm-menu-installed .gm-menu.gm-menu-37243 .gm-submenu.gm-submenu-bordered:not(.gm-aliexpress) {
border: 1px solid rgba(241,241,241,1) !important;
top: 51px;
}
.gm-product-price .gm-price { display: none; }
── §10c Social Icons ── */
@media screen and (max-width: 767px) {
.social { margin-top: 60px; }
}
.social-tab-en-icon {
background-image: url(/cdn/shop/files/Eng.3-01.svg?v=1621325322);
}
.social-icon {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 5px -1px 7px;
width: 40px;
height: 45px;
display: block !important;
}
@media screen and (max-width: 600px) {
.social-icon { width: 45px !important; }
}
@media screen and (min-width: 375px) and (max-width: 767px) {
.social .social-wrapper a { margin: 0 8px; }
}
.social-fb-icon {
background-image: url('data:image/svg+xml;utf8, ');
}
.blog-how-to-icon.active {
background-image: url('data:image/svg+xml;utf8,');
}
.blog-knowledge-icon {
background-image: url('data:image/svg+xml;utf8,');
}
.blog-knowledge-icon.active {
background-image: url('data:image/svg+xml;utf8,');
}
.blog-news-icon {
background-image: url('data:image/svg+xml;utf8,');
}
.blog-news-icon.active {
background-image: url('data:image/svg+xml;utf8,');
}
.how-to-icon {
background-color: #EAEDF2;
background-size: 35px;
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml;utf8,');
display: block !important;
padding: 8px;
width: 55px !important;
height: 55px;
}
.new-active-icon {
background-color: #EAEDF2; background-size: 35px;
background-repeat: no-repeat; background-position: center;
background-image: url('data:image/svg+xml;utf8,');
display: block !important; padding: 8px; width: 55px !important; height: 55px;
}
.pin-active-icon {
background-color: #EAEDF2; background-size: 35px;
background-repeat: no-repeat; background-position: center;
background-image: url('data:image/svg+xml;utf8,');
display: block !important; padding: 8px; width: 55px !important; height: 55px;
}
.cart-icon {
background-color: #EAEDF2; background-size: 35px;
background-repeat: no-repeat; background-position: center;
background-image: url('data:image/svg+xml;utf8, ');
display: block !important; padding: 8px; width: 55px !important; height: 55px;
}
.news-active-icon {
background-size: 35px; background-repeat: no-repeat; background-position: center;
background-color: #EAEDF2; display: block !important; padding: 8px; width: 55px !important; height: 55px;
background-image: url('data:image/svg+xml;utf8, ');
}
.write-icon {
background-size: 35px; background-repeat: no-repeat; background-position: center;
background-color: #EAEDF2; display: block !important; padding: 8px; width: 55px !important; height: 55px;
background-image: url('data:image/svg+xml;utf8, ');
}
.idea-icon {
background-size: 35px; background-repeat: no-repeat; background-position: center;
background-color: #EAEDF2; display: block !important; padding: 8px; width: 55px !important; height: 55px;
background-image: url('data:image/svg+xml;utf8, ');
}
/* ── §10e Footer Payment List ──
.list-payment {
display: flex; flex-wrap: wrap;
justify-content: center;
margin: -0.5rem 0; padding-top: 1rem; padding-left: 0;
}
@media screen and (min-width: 750px) {
.list-payment { justify-content: flex-end; margin: -0.5rem; padding-top: 0; }
}
.list-payment__item { align-items: center; display: flex; padding: 0.5rem; }
@media screen and (max-width: 767px) {
.footer__copyright { margin-bottom: 6rem; }
}
.img1 { width: 40px; }
/* ── §10f Octo Black Ribbon ──
.octo-black-ribbon {
position: fixed;
left: calc(env(safe-area-inset-left, 0));
bottom: calc(env(safe-area-inset-bottom, 0));
z-index: 99999;
width: 90px;
display: block;
pointer-events: auto;
}
.octo-black-ribbon img { width: 100%; height: auto; display: block; pointer-events: none; }
@media (max-width: 480px) {
.octo-black-ribbon { width: 64px; bottom: 0 !important; }*/
}
/* ============================================================
§11 HORIZON NATIVE OVERRIDES
============================================================ */
/* ── Inputs ── */
.field__input,
.select__select {
border-radius: var(--oc-radius-sm) !important;
border-color: var(--oc-ink-15) !important;
font-family: var(--font-body--family);
}
/* ── Facets ── */
.facets__heading { font-family: var(--font-body--family); }
/* ── z-index fix ── */
.link.animate-arrow { z-index: 9999; }
/* ── Predictive search (off by default) ── */
/* [CLEANUP §11] ปิด Horizon predictive search */
.predictive-search.predictive-search--header { display: none !important; }
/* ── Container mobile spacing ── */
@media screen and (max-width: 1015px) {
.c-container { margin: 5px; }
}
/* ── Horizon AI FAQ chip buttons ── */
[class*="ai-faq-chip-"] {
font-family: var(--font-body--family);
padding: 6px 14px;
border-radius: 6px;
background: rgba(23,169,187,0.09);
border: none;
color: #17a9bb;
font-size: px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
letter-spacing: 0.03em;
transition: background 0.2s;
}
[class*="ai-faq-chip-"]:hover { background: rgba(23,169,187,0.18); }
[class*="ai-faq-chip-"].active {
background: linear-gradient(135deg, #14c9df, #17a9bb);
color: #fff;
box-shadow: 0 2px 8px rgba(20,201,223,0.28);
}
/*
§11b → แยกออกเป็น 3 ไฟล์แล้ว โหลดต่อจาก custom.css.liquid:
*/
/* ============================================================
§12 PAGE-SPECIFIC
============================================================ */
@media screen and (max-width: 767px) {
.product .breadcrumb { display: none; }
.product .product__title { margin-top: 0; }
.collection .collection-hero__title { margin-bottom: 0; }
.collection .layout_block { margin: 0 6px; }
}
@media screen and (max-width: 749px) {
.product-information {
--padding-block-start: 0px !important;
}
}
/* ============================================================
§13 TABLES
============================================================ */
.divtable,
.divtable-spec {
overflow-x: auto;
width: 100%;
display: block;
}
/* ── Standard Table ── */
.divtable table {
border-collapse: collapse;
width: 100%;
white-space: nowrap;
table-layout: auto;
min-width: 120px;
box-shadow: unset;
}
@media (max-width: 768px) {
.divtable table { min-width: 550px; }
}
.divtable thead tr > th {
background: #bef3f3;
color: black;
font-weight: 600;
position: sticky;
padding: 0.75rem;
z-index: 1;
top: 0;
}
.divtable thead tr > :first-child,
.divtable tbody tr > :first-child {
position: sticky;
left: 0;
z-index: 2;
min-width: 45px;
background-color: white;
}
.divtable thead tr > :first-child { background: #bef3f3; }
.divtable tbody tr:nth-child(even) > td:first-child,
.divtable tbody tr:nth-child(even) > th:first-child { background-color: #eff2f3; }
.divtable tbody tr:nth-child(even) { background-color: #eff2f3; }
.divtable tbody tr:nth-child(odd) { background-color: #ffffff; }
.divtable td,
.divtable th {
text-align: center;
padding: 0.5rem 0.25rem;
white-space: nowrap;
overflow: hidden;
min-width: 40px;
}
.p-table { margin: 0.1em 0 0 0; font-weight: 600; }
/* ── Price Matrix Table ── */
.divtable.price table { min-width: 700px; font-size: 13px; }
.divtable.price thead tr > th {
background: var(--oc-cyan-l);
color: var(--oc-cyan);
font-weight: 700;
font-size: 13px;
padding: 8px 10px;
}
.divtable.price thead tr > :first-child { background: var(--oc-cyan-l); color: var(--oc-cyan); }
.divtable.price tbody td {
padding: 7px 10px;
border-bottom: 1px solid var(--oc-ink-15);
cursor: pointer;
transition: background .1s;
}
.divtable.price tbody td:first-child {
background: #fff;
font-weight: 700;
color: var(--oc-ink);
border-right: 1px solid var(--oc-ink-15);
}
.divtable.price tbody tr:hover td { background: var(--oc-purple-l) !important; }
.divtable.price tbody tr:hover td:first-child { color: var(--oc-purple-d) !important; }
.divtable.price td.h1 { color: #6B7280; }
.divtable.price td.h2 { color: #17a9bb; }
.divtable.price td.h3 { color: #0284c7; }
.divtable.price td.h4 { color: #7C3AED; }
.divtable.price td.selected {
background: var(--oc-cyan-l) !important;
outline: 2px solid var(--oc-cyan);
outline-offset: -2px;
border-radius: 4px;
}
.divtable-title {
padding: 12px 16px;
border-bottom: 1px solid var(--oc-ink-15);
font-weight: 700;
font-size: 14px;
color: var(--oc-ink);
background: #fff;
}
.divtable-note {
padding: 12px 16px;
border-top: 1px solid var(--oc-ink-15);
font-size: 11px;
color: var(--oc-ink-40);
line-height: 1.7;
background: #fff;
}
/* ── Spec Table ── */
.spec-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
table-layout: auto;
background: #fff;
}
.spec-table th,
.spec-table td {
white-space: nowrap;
text-align: left;
padding: 0.6rem 0.5rem;
border-bottom: 1px solid #e5e7eb;
}
.spec-table thead th {
position: sticky;
top: 0; z-index: 3;
background: #bef3f3 !important;
text-align: center;
font-weight: 600;
}
.spec-table thead th:first-child { background: #bef3f3 !important; }
.spec-table th:first-child,
.spec-table td:first-child {
position: sticky;
left: 0; z-index: 2;
background: #fff !important;
min-width: 120px;
}
.spec-table .subhead th {
padding: 0.6rem;
background-color: #f5f5f5 !important;
font-weight: 600;
letter-spacing: 0.02em;
border-bottom: 1px solid #e5e7eb;
}
.spec-table tbody tr { background: #fff !important; }
@media (max-width: 768px) {
.spec-table { min-width: 560px; }
}
/* ============================================================
§14 SCROLLBAR
============================================================ */
::-webkit-scrollbar { width: 12px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(241,241,241,1); }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }
/* ============================================================
§15 MEDIA / IMAGE FIXES
============================================================ */
img { max-width: 100%; height: auto; }
video { max-width: 100%; height: auto; }
canvas { max-width: 100%; height: auto; }
/* ============================================================
§16 INTERACTIONS & MICRO-ANIMATIONS
============================================================ */
/* ── §16a Card Hover System ── */
.card-wrapper .card,
.card--product {
transition:
transform var(--oc-dur-slow) var(--oc-ease-expo),
box-shadow var(--oc-dur-slow) var(--oc-ease-expo),
border-color var(--oc-dur-base) ease,
outline-color var(--oc-dur-base) ease;
will-change: transform, box-shadow;
}
.card-wrapper:hover .card,
.card-wrapper:focus-within .card {
transform: translateY(-8px) !important;
box-shadow:
0 12px 40px rgba(20, 201, 223, 0.18),
0 4px 16px rgba(100, 100, 160, 0.12) !important;
border-color: rgba(20, 201, 223, 0.35) !important;
}
.card-wrapper:active .card {
transform: translateY(-3px) scale(0.99) !important;
box-shadow:
0 4px 16px rgba(20, 201, 223, 0.14),
0 2px 6px rgba(100, 100, 160, 0.10) !important;
transition-duration: 0.08s !important;
}
.card-wrapper:hover .card__media .media img,
.card-wrapper:hover .card__media .media video {
transform: scale(1.06);
transition: transform 0.65s var(--oc-ease-expo);
}
.card-wrapper .card__media .media img,
.card-wrapper .card__media .media video {
transition: transform 0.45s var(--oc-ease-smooth);
}
.card-wrapper .quick-add {
opacity: 0;
transform: translateY(8px);
transition:
opacity var(--oc-dur-base) var(--oc-ease-expo),
transform var(--oc-dur-base) var(--oc-ease-expo);
}
.card-wrapper:hover .quick-add,
.card-wrapper:focus-within .quick-add {
opacity: 1;
transform: translateY(0);
}
.card-wrapper:hover .badge {
animation: oc-badge-pulse 0.5s var(--oc-ease-back) forwards;
}
/* ── §16b Button Animations ── */
.button {
position: relative;
overflow: hidden;
transition:
transform var(--oc-dur-fast) var(--oc-ease-back),
box-shadow var(--oc-dur-base) ease,
filter var(--oc-dur-base) ease,
background-position var(--oc-dur-base) ease !important;
}
.button::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.25) 0%, transparent 60%);
opacity: 0;
transition: opacity var(--oc-dur-base) ease;
pointer-events: none;
}
.button:hover::after { opacity: 1; }
.button:active::after { opacity: 0.6; }
.button:hover {
transform: translateY(-2px) !important;
box-shadow: var(--oc-shadow-glow-cyan) !important;
}
.button--primary:hover,
button.shopify-payment-button__button--unbranded:hover {
background-position: 100% 0 !important;
filter: brightness(1.05) !important;
}
.button:active {
transform: translateY(0) scale(0.97) !important;
box-shadow: none !important;
transition-duration: 0.06s !important;
}
.button--secondary:hover,
.button-secondary:hover {
box-shadow: var(--oc-shadow-glow-purple) !important;
transform: translateY(-2px) !important;
}
.button:focus-visible {
outline: 3px solid transparent;
outline-offset: 3px;
box-shadow:
0 0 0 3px var(--oc-cyan-vv),
var(--oc-shadow-glow-cyan) !important;
}
/* ── §16c Link & Nav Animations ── */
.oc-link-slide {
position: relative;
display: inline-block;
text-decoration: none;
}
.oc-link-slide::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 2px;
background: var(--oc-grad-btn);
border-radius: 2px;
transition: width var(--oc-dur-base) var(--oc-ease-expo);
}
.oc-link-slide:hover::after { width: 100%; }
.header__menu-item,
.menu__link {
position: relative;
transition: color var(--oc-dur-fast) ease;
}
.header__menu-item::after,
.menu__link::after {
content: '';
position: absolute;
left: 50%; bottom: -2px;
width: 0; height: 2px;
background: var(--oc-cyan-vv);
border-radius: 2px;
transform: translateX(-50%);
transition: width var(--oc-dur-base) var(--oc-ease-expo);
}
.header__menu-item:hover::after,
.header__menu-item[aria-current="page"]::after,
.menu__link:hover::after { width: 80%; }
.header__menu-item:hover,
.menu__link:hover { color: var(--oc-cyan-d) !important; }
/* ── §16d Input & Form Animations ── */
.field__input,
.select__select,
.customer input,
.customer select {
transition:
border-color var(--oc-dur-base) ease,
box-shadow var(--oc-dur-base) ease,
transform var(--oc-dur-fast) ease !important;
}
.field__input:focus,
.select__select:focus,
.customer input:focus {
border-color: var(--oc-cyan) !important;
box-shadow: 0 0 0 4px rgba(20, 201, 223, 0.14) !important;
transform: translateY(-1px);
outline: none;
}
.field__input:hover:not(:focus),
.select__select:hover:not(:focus) {
border-color: rgba(20, 201, 223, 0.5) !important;
}
.field__label {
transition:
top var(--oc-dur-fast) var(--oc-ease-smooth),
font-size var(--oc-dur-fast) var(--oc-ease-smooth),
color var(--oc-dur-fast) ease;
}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
color: var(--oc-cyan-d) !important;
}
/* ── §16e Variant Swatches & Buttons ── */
.swatch-input__input + .swatch-input__label,
[class*="variant-input"],
.color-swatch {
transition:
transform var(--oc-dur-fast) var(--oc-ease-back),
box-shadow var(--oc-dur-base) ease,
border-color var(--oc-dur-fast) ease;
cursor: pointer;
}
.swatch-input__input + .swatch-input__label:hover,
[class*="variant-input"]:hover {
transform: scale(1.12);
box-shadow: 0 0 0 3px rgba(20, 201, 223, 0.35);
}
.swatch-input__input:checked + .swatch-input__label,
[class*="variant-input--selected"] {
box-shadow:
0 0 0 2px #fff,
0 0 0 4px var(--oc-cyan-d);
}