/** Shopify CDN: Minification failed

Line 1635:0 Expected "*/" to terminate multi-line comment

**/
/* ============================================================
   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
   §3b Font Scale Tokens (--fs-2xs → --fs-lg, rem-based, scale with html root)
   §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;

  /* ── Default font-weight for base.css * { font-weight: var(--font-weight) } ── */
  /* Horizon sections override locally (e.g. heading sections → 700)            */
  /* Without this default, undefined var cascades incorrectly from parent scope  */
  --font-weight:                   400;
}

/* ── Fix: margin หลัง <style> tag ใน product description (Horizon base.css override) ── */
.text-block > style + * { margin-block-start: 1rem; }
.text-block > .oc-hd-bar,
.text-block > .oc-feat-strip,oc-pill-row
.text-block > .oc-step-row,
.text-block > .divtable-spec,
.text-block > .divtable { margin-block-start: 1.2rem; margin-block-end: 1.2rem; }

/* ============================================================
   §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;

/* ── §3b  PRODUCT DESC FONT SCALE ── */
/* rem → scale via html root clamp(14px, calc(10px + 0.5vw), 18px)   */
/* at 320px≈14px  |  768px≈14px  |  1280px≈16.4px  |  1600px≈18px  */
  --fs-2xs:  0.68rem;   /* ~9.5–12.2px  — tiny label, badge number, step num */
  --fs-xs:   0.75rem;   /* ~10.5–13.5px — kicker, section-label, note        */
  --fs-sm:   0.82rem;   /* ~11.5–14.8px — badge, chip, step-label, feat-item  */
  --fs-base: 0.88rem;   /* ~12.3–15.8px — button, pill, subnav, body-sm       */
  --fs-md:   0.95rem;   /* ~13.3–17.1px — body-regular, table cell, tip        */
  --fs-lg:   1.05rem;   /* ~14.7–18px   — table title, subnav-header           */

}


/* ============================================================
   §4  TYPOGRAPHY
   ============================================================ */

:root {
  --font-paragraph--size: clamp(0.94rem, 0.88rem + 0.1vw, 1.10rem);
  --font-h6--size: clamp(0.92rem, 1.1vw, 1.1rem);
  --font-h5--size: clamp(1.0rem, 1.5vw, 1.2rem);
  --font-h4--size: clamp(1.10rem, 1.8vw, 1.25rem);
  --font-h3--size: clamp(1.18rem, 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(1.95rem, 5vw, 3.5rem);
  --font-sm--size: clamp(0.90rem, 0.88rem + 0.18vw, 1.1rem);
  --font-xs--size: clamp(0.85rem, 0.82rem + 0.18vw, 1.1rem);
}

html { font-size: clamp(14px, calc(10px + 0.5vw), 18px); }

/* [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, span {
    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; }


.field__label {
  font-size: var(--fs-xs);
  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;
}

/* ── 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: linear-gradient(135deg,#14c9df,#17a9bb);
  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: var(--fs-base) !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; }
}

/* ── 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: var(--fs-base);
}
.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); }


/* ── §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
   ============================================================ */

/* ── §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:
     <link href="//www.octopus.co.th/cdn/shop/t/131/assets/oc-header-skin.css?v=114325" rel="stylesheet" type="text/css" media="all" />
     <link href="//www.octopus.co.th/cdn/shop/t/131/assets/oc-header-search.css?v=114325" rel="stylesheet" type="text/css" media="all" />
     <link href="//www.octopus.co.th/cdn/shop/t/131/assets/oc-lang-toggle.css?v=114325" rel="stylesheet" type="text/css" media="all" />
*/


/* ============================================================
   §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;
  }
}

/* ============================================================
   §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; }


.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;
}

/* ── 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: var(--fs-base);
  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;
}

/* ── §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;
}

/* ── 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: var(--fs-base); 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: var(--fs-sm); }

.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: var(--fs-base); 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: var(--fs-sm); }

.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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-base); 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: var(--fs-base); 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:var(--fs-sm);color:var(--oc-cyan,#17a9bb);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px;line-height:1.2}
.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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-base); 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: var(--fs-2xs); 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: var(--fs-sm); 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;
}

/* custom.css */
.product-description ul,
.product__description ul,
.rte ul {                          /* Horizon ใช้ .rte ครอบ rich text */
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0.75em 0;
}

.product-description ul li,
.product__description ul li,
.rte ul li {
  list-style: none !important;
  position: relative;
  padding-left: 1.4em;
  margin: 0.3em 0;
}

.product-description ul li::before,
.product__description ul li::before,
.rte ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #17a9bb;
  font-weight: 600;
}


/* ============================================================
   §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);
}

/******* only mobile only **********/

.mobile-only {
    display: none;
}

/* Mobile Styles: Show the element when the screen width is 768px or less */
@media only screen and (max-width: 768px) {
    .mobile-only {
        display: block; /* Or display: inline, inline-block, flex, etc., depending on the element type you want to show */
    }
}

/* ============================================================