/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://www.crystalcentury.com/
 Description:  Child theme for Premier Trophy - visual refinements only.
 Author:       Premier Trophy
 Template:     hello-elementor
 Version:      2.9.4-mobile-touch-targets
 Text Domain:  hello-elementor-child
*/

/* ============================================================
   DESIGN SYSTEM TOKENS - Premier Trophy · 卓越獎品
   Distilled from the Premier Trophy Design System (claude.ai/design).
   Google Fonts loaded via wp_enqueue_style in functions.php.
   ============================================================ */
:root {
  /* Signature gold */
  /* ── Primary palette: ROYAL BLUE anchored at #407090 (sampled from
   *    the deepest dominant blue in logo-mark.webp). Substitutes champagne
   *    gold as the brand accent per the 2026-05-27 blue-palette pass.
   *    Warm-cream surfaces stay - warmth × blue contrast is the point.
   *
   *    Champagne gold is RETAINED only as alias values below for the
   *    Google-reviews 5-star icon + official-seal trust badges, where
   *    gold reads as a "rating" colour not a brand accent.
   */
  --cc-primary-50: #eef3f8; /* wash / form-field focus halo */
  --cc-primary-100: #d9e3ee;
  --cc-primary-200: #b5c6dc;
  --cc-primary-300: #8aa6c4;
  --cc-primary-400: #2d789a; /* restrained link tint */
  --cc-primary-500: #0b4f71; /* primary CTA fill, high contrast */
  --cc-primary-600: #083e59; /* hover */
  --cc-primary-700: #062f43; /* press */
  --cc-primary-800: #052636; /* deep press */
  --cc-primary-900: #06153a;

  /* Steel-teal tertiary accent (from hexagonal logo facet edges) - used on
   * dark surfaces where primary blue would clash with itself. */
  --cc-teal-300: #b9d9e5;
  --cc-teal-500: #3d6979;
  --cc-teal-900: #1f3a47;

  /* Backward-compat aliases: every existing `--cc-gold-*` reference flips
   * to blue in a single shot. Originals removed; the live UI re-skins
   * without rewriting any component class.
   */
  --cc-gold-50: #eef3f8;
  --cc-gold-100: #d9e3ee;
  --cc-gold-200: #b5c6dc;
  --cc-gold-300: #8aa6c4;
  --cc-gold-400: #2d789a;
  --cc-gold-500: #0b4f71; /* compatibility alias */
  --cc-gold-600: #083e59; /* compatibility alias */
  --cc-gold-700: #062f43; /* compatibility alias */
  --cc-gold-800: #052636;
  --cc-gold-900: #06153a;

  /* True champagne gold preserved for the rating-icon ONLY - referenced
   * via `--cc-rating-gold` so future searches won't confuse them. */
  --cc-rating-gold-400: #c6a022;
  --cc-rating-gold-500: #b8960c;
  /* 2026-06-18 owner palette: site reduces to 5 colours - 2 navy/steel blues
   * (--cc-logo-blue + the deep navy), this gold/orange-yellow accent, white,
   * and black. --cc-accent-gold is the warm accent that replaces creamish
   * surfaces with a gold cue (used as underlines, hover bars, dividers). */
  --cc-accent-gold: #c9a85a;
  /* R17: bright gold clears 3:1 on navy #407090; wire trust icons + active
   * dot + decorative rules to this so they render gold, not blue. */
  --cc-accent-gold-bright: #e3c77f;
  --cc-rating-gold: var(
    --cc-rating-gold-400
  ); /* design-system alias (use-card accent line) */

  /* Steel teal - logo hex facets; use sparingly */
  --cc-steel-50: #eef4f6;
  --cc-steel-100: #d5e1e3;
  --cc-steel-200: #a8c5cd;
  --cc-steel-300: #7aa6b3;
  --cc-steel-400: #4f8294;
  --cc-steel-500: #3d6979;
  --cc-steel-600: #305362;
  --cc-steel-700: #1f3a47;

  /* Ink scale */
  --cc-ink-1000: #0a0a0a; /* near-black - dark footer / deepest surfaces */
  --cc-ink-900: #1a1a1a;
  --cc-ink-800: #222222;
  --cc-ink-700: #333333;
  --cc-ink-600: #444444;
  --cc-ink-500: #555555;
  /* 4.48:1 on white, which fails WCAG AA by 0.02. Measured 2026-09-08 after PSI
     flagged eight small-grey-on-white elements, and it is the TOKEN at fault rather
     than the alpha: the rgba(255,255,255,.6) text on the dark surfaces measures
     6.9:1 and passes. #6b6b6b is 5.33:1 and is a barely perceptible darkening. */
  --cc-ink-400: #6b6b6b;
  --cc-ink-300: #888888;
  --cc-ink-200: #aaaaaa;
  --cc-ink-100: #cccccc;

  /* Warm surfaces - NEVER use blue-grey neutrals */
  --cc-surface: #ffffff;
  --cc-surface-warm: #f9f7f4;
  --cc-surface-cream: #f4efe6;
  --cc-surface-tint: #fbfaf7;
  --cc-border-soft: #f0ebe3;
  --cc-border: #ece8e0;
  --cc-border-strong: #e0d9cf;
  --cc-border-input: #d8d2c8;

  /* Semantic */
  --cc-success: #2e8b57;
  --cc-warn: #c08a1a;
  --cc-danger: #b3261e;
  --cc-info: #4f8294;

  /* Logo blue - sampled from logo-mark.webp (teal #3b7590), darkened to AA-readable
     ink. 2026-06: MAIN font colour site-wide; grey is supplemental. */
  --cc-logo-blue: #0b4f71;
  --cc-logo-blue-deep: #062f43;
  --cc-brand-bg: #0b4f71; /* all dark action sections use the action blue */

  /* Aliases */
  --cc-primary: var(--cc-gold-500);
  --cc-primary-hover: var(--cc-gold-700);
  --cc-primary-press: var(--cc-gold-600);
  --cc-fg-strong: var(--cc-logo-blue); /* was ink-900 */
  --cc-fg: var(--cc-logo-blue); /* was ink-700 - body text now logo blue */
  --cc-fg-muted: var(--cc-ink-500); /* grey, supplemental */
  --cc-fg-quiet: var(--cc-ink-300);

  /* Type families */
  --cc-font-display:
    "Cormorant Garamond", "Noto Serif TC", "Songti TC", "Times New Roman", serif;
  --cc-font-serif-tc: "Noto Serif TC", "Songti TC", "MingLiU", serif;
  --cc-font-sans:
    "Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Microsoft JhengHei", system-ui, sans-serif;
  --cc-font-sans-tc: var(--cc-font-sans); /* design-system alias */
  --cc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 2026-06-17 unified type scale (font-scale-reorg) */
  --cc-fs-h1: 32px;
  --cc-fs-h2: 24px;
  --cc-fs-h3: 19px;
  --cc-fs-lead: 18px;
  --cc-fs-control: 14px;
  --cc-fs-body: 15px;
  --cc-fs-small: 13px;
  --cc-fs-micro: 11px;
  --cc-fs-display: clamp(2rem, 5vw, 3.6rem);

  /* Spacing - 4px base */
  --cc-sp-1: 4px;
  --cc-sp-2: 8px;
  --cc-sp-3: 12px;
  --cc-sp-4: 16px;
  --cc-sp-5: 20px;
  --cc-sp-6: 24px;
  --cc-sp-8: 32px;
  --cc-sp-12: 48px;
  --cc-sp-16: 64px;
  --cc-sp-20: 80px;

  /* Radii - sharp. Manufactured feel. Max 6px for cards. */
  --cc-r-xs: 2px; /* hero CTA */
  --cc-r-sm: 3px; /* form fields, secondary buttons, pagination */
  --cc-r-md: 4px;
  --cc-r-lg: 6px; /* cards - the default */
  --cc-r-pill: 999px;

  /* Shadows - warm-black, no colour cast */
  --cc-shadow-1: 0 1px 2px rgba(20, 16, 8, 0.04);
  --cc-shadow-2: 0 2px 6px rgba(20, 16, 8, 0.06);
  --cc-shadow-card-hover: 0 6px 22px rgba(0, 0, 0, 0.1);
  --cc-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.18);
  --cc-shadow-hero-text: 0 1px 6px rgba(0, 0, 0, 0.4);

  /* Focus ring */
  --cc-focus: 0 0 0 3px rgba(32, 80, 160, 0.3);

  /* Motion - restrained */
  --cc-dur-fast: 150ms;
  --cc-dur-base: 200ms;
  --cc-dur-slow: 350ms;
  --cc-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout */
  --cc-container: 1120px;
  --cc-container-wide: 1280px;
  --cc-container-narrow: 880px;

  /* Hero overlay */
  --cc-overlay-hero: linear-gradient(
    to right,
    rgba(10, 34, 58, 0.72) 40%,
    rgba(10, 34, 58, 0.18) 100%
  );
  --cc-overlay-card: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0) 60%
  );
}

/* ============================================================
   FAQ PAGE - visible accordion (Schema.org FAQPage in JSON-LD)
   ============================================================ */
.cc-faq-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.cc-faq-heading {
  font-family: var(--cc-font-display);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cc-primary-800);
  margin: 0 0 16px;
}
.cc-faq-intro {
  font-size: var(--cc-fs-body);
  line-height: 1.7;
  color: var(--cc-ink-600);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cc-border-soft);
}
.cc-faq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-faq-item {
  border-bottom: 1px solid var(--cc-border-soft);
  padding: 4px 0;
}
.cc-faq-item:first-child {
  border-top: 1px solid var(--cc-border-soft);
}
.cc-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  list-style: none;
  padding: 18px 12px 18px 0;
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-h3);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cc-primary-800);
  cursor: pointer;
  transition: color var(--cc-dur-fast) ease;
}
.cc-faq-q::-webkit-details-marker {
  display: none;
}
.cc-faq-q::before {
  content: "+";
  font-family: var(--cc-font-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--cc-primary-500);
  flex-shrink: 0;
  transition: transform var(--cc-dur-fast) ease;
  margin-top: 2px;
}
.cc-faq-item[open] .cc-faq-q::before {
  transform: rotate(45deg);
}
.cc-faq-q:hover {
  color: var(--cc-primary-600);
}
.cc-faq-a {
  padding: 0 12px 22px 28px;
  font-size: var(--cc-fs-body);
  line-height: 1.75;
  color: var(--cc-fg);
}

/* ============================================================
   ELEMENTOR PRO CONTACT-BUTTONS - hidden site-wide.
   Was rendering as a bottom-right "i" floater (e-contact-buttons-var-3),
   overlapping our own pt-floater (WhatsApp / quote prompt). Resolved FAB policy
   (2026-06, design-system confirmed): WhatsApp pt-floater pinned bottom-right
   (right:22px bottom:22px, z1500); cc-mini quote cart stacked directly above
   (bottom:92px, z9990); Elementor's variant killed below.
   ============================================================ */
.e-contact-buttons,
[class*="e-contact-buttons-var-"] {
  display: none !important;
}

/* ============================================================
   QUOTE FORM - file-upload box (cc_logo input)
   ============================================================ */
.pt-qf-upload-box {
  display: block;
  border: 1.5px dashed var(--cc-primary-300);
  border-radius: 8px;
  padding: 18px 16px;
  background: var(--cc-primary-50);
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--cc-dur-fast) ease,
    background var(--cc-dur-fast) ease;
}
.pt-qf-upload-box:hover {
  border-color: var(--cc-primary-500);
  background: #fff;
}
.pt-qf-upload-box input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pt-qf-upload-box {
  position: relative;
}
.pt-qf-upload-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--cc-primary-700);
}
.pt-qf-upload-cue svg {
  color: var(--cc-primary-500);
}
.pt-qf-upload-text {
  font-size: var(--cc-fs-control);
  font-weight: 600;
}
.pt-qf-upload-hint {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-500);
  letter-spacing: 0.04em;
}
.pt-qf-upload-list {
  margin-top: 8px;
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-600);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-qf-upload-list .cc-file-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--cc-border-soft);
  border-radius: 4px;
  width: fit-content;
}

/* Quote-form product card - configurator selections block */
.pt-qf-product-cfg {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--cc-primary-50);
  border: 1px solid var(--cc-primary-100);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-qf-product-cfg-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--cc-fs-small);
}
.pt-qf-product-cfg-label {
  color: var(--cc-primary-700);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pt-qf-product-cfg-val {
  color: var(--cc-fg-strong);
  text-align: right;
  max-width: 60%;
  overflow-wrap: anywhere;
}

/* ============================================================
   PDP CONFIGURATOR - chip groups for size / colour / attachment /
   font / print method / packaging. Selections forward to quote via URL.
   ============================================================ */
.cc-cfg {
  margin: 18px 0 22px;
  padding: 18px 20px;
  background: var(--cc-surface-warm);
  border: 1px solid var(--cc-border-soft);
  border-radius: 6px;
}
.cc-cfg-group {
  margin-bottom: 14px;
}
.cc-cfg-group:last-child {
  margin-bottom: 0;
}
.cc-cfg-label {
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-primary-600);
  margin-bottom: 7px;
}
.cc-cfg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-cfg-chip {
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--cc-border-soft);
  border-radius: 999px;
  font-size: var(--cc-fs-control);
  color: var(--cc-primary-700);
  cursor: pointer;
  transition: all var(--cc-dur-fast) ease;
  font-family: inherit;
  line-height: 1.3;
}
.cc-cfg-chip:hover {
  border-color: var(--cc-primary-400);
  color: var(--cc-primary-800);
}
.cc-cfg-chip.is-selected {
  background: var(--cc-primary-500);
  border-color: var(--cc-primary-500);
  color: #fff;
  font-weight: 600;
}
.cc-cfg-qty,
.cc-cfg-notes {
  width: 100%;
  max-width: 280px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--cc-border-soft);
  border-radius: 4px;
  font-size: var(--cc-fs-control);
  color: var(--cc-primary-800);
  font-family: inherit;
}
.cc-cfg-notes {
  max-width: 100%;
  resize: vertical;
  min-height: 56px;
}
.cc-cfg-qty:focus,
.cc-cfg-notes:focus {
  outline: none;
  border-color: var(--cc-primary-500);
  box-shadow: 0 0 0 3px var(--cc-primary-50);
}

/* Enquiry button - primary blue, no inline-style golds */
.cc-enquiry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cc-primary-500);
  color: #fff;
  border: 0;
  padding: 13px 32px;
  font-size: var(--cc-fs-control);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 14px;
  border-radius: 3px;
  text-decoration: none;
  transition: background var(--cc-dur-fast) ease;
}
.cc-enquiry-btn:hover {
  background: var(--cc-primary-700);
  color: #fff;
}
.cc-loop-enquiry {
  display: block;
  text-align: center;
  background: var(--cc-primary-500);
  color: #fff;
  margin: 8px 12px 0;
  padding: 9px 16px;
  font-size: var(--cc-fs-control);
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  transition: background var(--cc-dur-fast) ease;
}
.cc-loop-enquiry:hover {
  background: var(--cc-primary-700);
  color: #fff;
}

/* ============================================================
   BILINGUAL LOCKUP - drives cc_bi() helper rendering.
   ZH primary + EN secondary in a single label. On :lang(en) locale,
   `.pt-bi-zh` hides; `.pt-bi-zh-always` keeps both (brand lockups).
   ============================================================ */
.pt-bi-zh {
  margin-right: 6px;
}
.pt-bi-en {
  color: var(--cc-ink-500);
  font-size: 0.88em;
}
html[lang^="en"] .pt-bi-zh:not(.pt-bi-zh-always) {
  display: none;
}
html[lang^="en"] .pt-bi-en {
  color: inherit;
  font-size: 1em;
  margin-left: 0;
}
html[lang^="en"] .pt-bi-zh-always + .pt-bi-en {
  font-size: 1em;
  color: inherit;
}

/* Owner's father, 2026-08-31: 「複製/Copy按鈕只要一個」and the label must be
   translated rather than showing both languages at once. The default bilingual
   pair above deliberately shows ZH and EN together on Chinese pages, which is
   right for navigation and wrong for a button. `.pt-bi-solo` shows exactly one
   language on each side. */
.pt-bi-solo.pt-bi-en {
  display: none;
}
.pt-bi-solo.pt-bi-zh {
  margin-right: 0;
}
html[lang^="en"] .pt-bi-solo.pt-bi-en {
  display: inline;
  color: inherit;
  font-size: 1em;
}
html[lang^="en"] .pt-bi-solo.pt-bi-zh {
  display: none;
}
/* 2026-06-17 owner: "dont leak eng for the chinese page". On the ZH locale show
   Chinese only for bilingual translation pairs - the EN half is a translation,
   not brand identity. Brand wordmarks use .cc-logo-en / .pt-brand-en (untouched).
   Opt-out: add .pt-bi-en-keep to any EN that must stay on ZH. */
html:not([lang^="en"]) .pt-bi-en:not(.pt-bi-en-keep),
html:not([lang^="en"]) .pt-hdr-nav-en,
html:not([lang^="en"]) .pt-hdr-tier2-en,
html:not([lang^="en"]) .pt-hdr-tier3-en,
html:not([lang^="en"]) .pt-hdr-mobile-cat-en,
html:not([lang^="en"]) .cc-usecard-en,
html:not([lang^="en"]) .pt-procurement-item-en,
html:not([lang^="en"]) .pt-trust-item-en,
html:not([lang^="en"]) .pt-addr-en {
  display: none;
}
/* When ZH hides, EN takes the slot. */

/* ============================================================
   EN LOCALE PARITY  - separate type scale for English surfaces.
   ZH stays tighter (Han characters need it); EN gets +1pt display
   and looser line-height for readability parity. Fires automatically
   via :lang(en) selector + html[lang^=en] hook (WPML sets both).
   ============================================================ */
html[lang^="en"]
  :where(p, li, dd, dt, .pt-hdr-mega-list a, .pt-recommends-list a) {
  line-height: 1.65;
}
html[lang^="en"] :where(h1, h2, h3, .cc-eyebrow, .pt-eyebrow-text) {
  letter-spacing: 0.03em;
}
html[lang^="en"] :where(h1, .pt-hero-title) {
  line-height: 1.18;
  font-size: clamp(36px, 4.4vw, 60px);
}
html[lang^="en"] :where(h2, .pt-section-title) {
  line-height: 1.22;
}
html[lang^="en"] .cc-eyebrow,
html[lang^="en"] .pt-eyebrow-text,
html[lang^="en"] .pt-hdr-mega-en {
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
html[lang^="en"] .pt-hdr-nav-en {
  font-size: var(--cc-fs-micro);
}
/* EN-only fallback rendering for content with no English translation.
   Wrap untranslated strings in `<span class="cc-zh-fallback">…</span>`.
   On EN locale the original ZH renders dimmed + flagged; ZH locale
   shows the text unchanged. */
html[lang^="en"] .cc-zh-fallback {
  color: var(--cc-fg-muted);
  font-style: italic;
}
html[lang^="en"] .cc-zh-fallback::after {
  content: " · zh original";
  font-size: 0.78em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-primary-400);
  margin-left: 4px;
}

/* ============================================================
   BASE - Typography & smoothing
   ============================================================ */
body {
  font-family: var(--cc-font-sans);
  color: var(--cc-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Suppress WPML "development site" front-end banner.
   Proper fix: register a production site key at wpml.org and remove this rule. */
.otgs-development-site-front-end {
  display: none !important;
}
a:not(.elementor-button):not(.button):not(.cc-enquiry-btn):not(.cc-btn) {
  color: inherit;
  text-decoration: none;
}
a:not(.elementor-button):not(.button):not(.cc-enquiry-btn):not(.cc-btn):hover {
  color: var(--cc-primary-500);
}
.elementor-widget-heading .elementor-heading-title {
  line-height: 1.3;
}

/* ============================================================
   HEADER - Nav
   ============================================================ */
.elementor-nav-menu .elementor-item {
  letter-spacing: 0.05em;
  font-weight: 500 !important;
  transition: color 0.18s;
}
.e--pointer-framed .elementor-item::before,
.e--pointer-framed .elementor-item::after {
  border-width: 1px !important;
}

/* ============================================================
   HERO - Carousel with text overlay
   ============================================================ */

/* Outer hero wrapper - ensures carousel + overlay stack correctly */
.elementor-element-3ce4b654,
.elementor-element-a94a31f {
  position: relative !important;
  overflow: hidden;
}

/* Carousel fills full container */
.elementor-element-3ce4b654 .e-swiper-container,
.elementor-element-3ce4b654 .swiper,
.elementor-element-3ce4b654 .elementor-image-carousel-wrapper,
.elementor-element-a94a31f .e-swiper-container,
.elementor-element-a94a31f .swiper,
.elementor-element-a94a31f .elementor-image-carousel-wrapper {
  width: 100%;
  display: block;
}

/* Text overlay */
.elementor-element-cc_herolay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  background: none !important;
  /* Owner's mother, 2026-09-07: remove gradients and dark scrims from photos.
     Text readability handled via text-shadow on headlines instead. */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  --flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  padding: 0 7% 6% !important;
  pointer-events: none;
}
.elementor-element-cc_herolay * {
  pointer-events: auto;
}

/* Hero CTA overflow fix - Elementor flex container reads flex-wrap from the
   --flex-wrap custom property. On short mobile heights it wrapped the CTA
   button into a 2nd column, pushing it off the right edge. Doubled class
   raises specificity above Elementor's per-element generated rule. */
.elementor-element-cc_herolay.elementor-element-cc_herolay {
  --flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Hero headline */
.elementor-element-cc_htag .elementor-heading-title {
  color: #ffffff !important;
  font-size: clamp(1.7rem, 4vw, 2.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.4em;
}

/* Hero sub-headline */
.elementor-element-cc_hsub .elementor-text-editor p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: var(--cc-fs-lead) !important;
  margin-bottom: 1.2em;
  letter-spacing: 0.04em;
}

/* Hero CTA button */
.elementor-element-cc_hbtn .elementor-button {
  background-color: var(--cc-primary-500) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  border-radius: 2px !important;
  transition:
    background 0.2s,
    transform 0.15s !important;
}
.elementor-element-cc_hbtn .elementor-button:hover {
  background-color: var(--cc-primary-700) !important;
  transform: translateY(-1px);
}

/* ============================================================
   CATEGORY GRID - 精選產品分類
   ============================================================ */
.elementor-element-cc_catsec {
  background: #f9f7f4 !important;
}

/* 2026-06-26: the legacy [cc_catsec] shortcode is blanked on the front page
   (part-05 pre_do_shortcode_tag), but its Elementor section kept its cream
   background + padding, leaving an empty ~80px band after the category grid -
   the "blank space" the owner kept flagging on crystalcentury.com/. The real
   category section is the [cc_home_categories] (.cc-homecats) block, so collapse
   the emptied legacy wrapper on the home page. */
body.home .elementor-element-cc_catsec {
  display: none !important;
}

/* Section title with gold underline */
.elementor-element-cc_cattitle .elementor-heading-title {
  font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  color: var(--cc-fg-strong) !important;
  position: relative;
  padding-bottom: 0.6em;
}
.elementor-element-cc_cattitle .elementor-heading-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--cc-primary-500);
  margin: 10px auto 0;
}

/* Grid container */
.elementor-element-cc_catgrid {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* Category cards */
.elementor-element-cc_catgrid .elementor-widget-image-box {
  flex: 0 0 calc(25% - 12px);
  min-width: 160px;
  max-width: 220px;
  box-sizing: border-box;
}
.elementor-element-cc_catgrid .elementor-image-box-wrapper {
  background: #ffffff;
  /* 2026-06-17 owner: blue border on every card (cat / subcat / product). */
  border: 1px solid var(--cc-logo-blue, #407090);
  border-radius: 6px;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  text-align: center;
  height: 100%;
  padding-bottom: 14px;
}
.elementor-element-cc_catgrid .elementor-image-box-wrapper:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.elementor-element-cc_catgrid .elementor-image-box-img {
  margin-bottom: 0;
  overflow: hidden;
}
.elementor-element-cc_catgrid .elementor-image-box-img img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: #0b1a2f;
  display: block;
  transition: transform 0.35s;
}
.elementor-element-cc_catgrid .elementor-image-box-wrapper:hover img {
  transform: none;
}
.elementor-element-cc_catgrid .elementor-image-box-content {
  padding: 10px 8px 0;
}
.elementor-element-cc_catgrid .elementor-image-box-title {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--cc-fg-strong) !important;
  letter-spacing: 0.04em;
  margin: 0 !important;
}
/* 2026-06-17 owner: 精選產品分類 label had no contrast. The label is an <a> inside
   the <h3> and renders in TWO contexts:
   (1) the homepage .cc-homecats-grid lays the label over a DARK navy gradient scrim
       (part-02.php:29) → it must be WHITE;
   (2) the 7 bare [cc_catgrid] Elementor placements render the label on a light bg
       → it must be DARK ink.
   IMPORTANT: do NOT use var(--cc-fg-strong) here - it is aliased to --cc-logo-blue
   (#407090, style.css :115), which is the exact low-contrast blue the owner flagged.
   Use literal colours so the cascade can't resolve back to that blue. */
.cc-catcard .elementor-image-box-title,
.cc-catcard .elementor-image-box-title a {
  color: #1a1a1a !important;
}
/* 2026-09-07: case (1) above is DEAD. The homepage label no longer sits over a dark
   scrim, because his mother asked for the gradient removed entirely and the caption
   moved below the photograph. White on the white panel rendered the category names
   as pale grey, measured computed colour rgb(255,255,255) on #fff. Both contexts are
   now light, so both take the dark ink and the shadow goes with the scrim. */
.cc-homecats-grid .cc-catcard .elementor-image-box-title,
.cc-homecats-grid .cc-catcard .elementor-image-box-title a {
  color: #1a1a1a !important;
}
.cc-catcard .elementor-image-box-title a:hover {
  color: #062f43 !important;
}
.cc-homecats-grid .cc-catcard .elementor-image-box-title a:hover {
  color: #062f43 !important;
}

/* 2026-07-16: hover states must preserve the label/count contrast. The old
   hover colors could resolve to the same blue as the active surface, leaving
   the text unreadable on keyboard and pointer interaction. */
.cc-subnav-link:hover,
.cc-subnav-link:focus-visible,
.cc-catrail-sub:hover,
.cc-catrail-sub:focus-visible,
.cc-catrail-all:hover,
.cc-catrail-all:focus-visible {
  background: #0b4f71 !important;
  color: #ffffff !important;
}
.cc-subnav-link:hover .cc-subnav-count,
.cc-subnav-link:focus-visible .cc-subnav-count,
.cc-catrail-sub:hover .cc-catrail-count,
.cc-catrail-sub:focus-visible .cc-catrail-count {
  color: #ffffff !important;
}
.cc-pill:hover,
.cc-pill:focus-visible,
.pg-filter:hover,
.pg-filter:focus-visible {
  background: #0b4f71 !important;
  border-color: #0b4f71 !important;
  color: #ffffff !important;
  opacity: 1;
}
.pg-filter:hover .pg-filter-count,
.pg-filter:focus-visible .pg-filter-count {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .elementor-element-cc_catgrid .elementor-widget-image-box {
    flex: 0 0 calc(33.333% - 12px);
  }
}
@media (max-width: 600px) {
  .elementor-element-cc_catgrid .elementor-widget-image-box {
    flex: 0 0 calc(50% - 8px);
    min-width: 120px;
  }
}

/* ============================================================
   WOOCOMMERCE - Product cards (shop / category pages)
   ============================================================ */

/* ------------------------------------------------------------------
   Mobile overflow on the product page, 2026-09-14.

   Howard, with a phone screenshot of AE506: "on the phone it doesnt show the full photo
   and looks weird coz its scrollable but the full photo cant be easily seen".

   Measured over CDP at a 500px viewport, so these are the real numbers and not a guess:

     div.woocommerce-product-gallery__wrapper   width 1736px
     div.woocommerce-product-gallery__image     width  506px, two of them side by side
     div.pt-trusted-list                        width 1447px
     div.cc-pdp-case                            right edge 504px

   The gallery is the one he is describing. Flexslider lays the slides out in a row and
   writes an inline width in pixels, and on a narrow screen that row is three and a half
   viewports wide with nothing clipping it, so the page scrolls sideways and the first
   photograph is cut off at the right. The slide is also 6px wider than the viewport on its
   own, which is why even the first one never fits.

   The trusted-brands strip is a separate bug that happens to look the same: one line of
   names that never wraps.

   Inline widths from JS need !important to beat, which is the one place this file uses it.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .woocommerce-product-gallery,
  .woocommerce-product-gallery .flex-viewport {
    max-width: 100%;
    overflow: hidden;
  }
  .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    max-width: 100%;
    display: block;
  }
  .woocommerce-product-gallery__image {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
  }
  /* Only the active slide is shown, so the photograph is whole rather than a strip of
     two. The thumbnail row below it is how the other views are reached. */
  .woocommerce-product-gallery--with-images .woocommerce-product-gallery__wrapper
    > .woocommerce-product-gallery__image:not(.flex-active-slide) {
    display: none;
  }
  .woocommerce-product-gallery__image img,
  .woocommerce-product-gallery__image a img {
    width: 100%;
    height: auto;
    display: block;
  }
  .cc-pdp-case { max-width: 100%; box-sizing: border-box; }
}

/* The trusted-brands strip wraps instead of running off the side. This is not scoped to a
   breakpoint because the line is too long for a tablet as well. */
.pt-trusted-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

/* The last 26px of the same overflow: the add-to-quote link and the quantity input sit in
   a row that is 26px wider than a 500px viewport once the padding is counted. Measured
   after the gallery fix above, which took the page from 21 overflowing elements to 3. */
@media (max-width: 900px) {
  .cc-atq, .cc-atq-compact { max-width: 100%; box-sizing: border-box; }
  .cc-atq-compact input, .cc-cfg-qty input, .cc-pdp-case input[type="text"],
  .cc-pdp-case input[type="number"] { max-width: 100%; box-sizing: border-box; }
}

/* The last overflowing element: the hidden file input inside the logo upload box. A bare
   <input type="file"> keeps its intrinsic width (276px here) whatever the box around it
   does, so it pushed the page 26px past a 500px viewport on its own. Measured over CDP
   2026-09-14 after the gallery and trusted-list fixes above: 21 overflowing elements
   became 1, and this was the one. */
.cc-logo-upload-box { position: relative; }
.cc-logo-upload-box input[type="file"] {
  /* width:100% was the wrong fix and measurably made it worse, 276px became 444px,
     because the parent is wider than the viewport. A file input keeps an intrinsic width
     no matter what, so it is taken out of flow entirely and stretched over the label,
     which is the normal pattern for a styled upload box and stays clickable. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}