.woocommerce ul.products {
  margin: 0 !important;
}
.woocommerce ul.products li.product {
  background: #fff;
  /* 2026-06-17 owner: blue border on every product card, 0.05cm thick. Chrome
     resolves a 0.05cm (1.889px) border-width to a 1px USED value (floored), so the
     card looked unchanged from the old 1px grey border - use 2px (~0.053cm) so the
     intended thickness actually renders crisply at every DPR. !important beats the
     later faint --cc-border rule (style.css:6547). */
  border: 2px solid var(--cc-logo-blue, #407090) !important;
  border-radius: 6px;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  padding-bottom: 14px !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
  border-radius: 0 !important;
  transition: transform 0.35s;
}
.woocommerce ul.products li.product:hover img {
  transform: none; /* 2026-06-05 disable auto hover-zoom per owner */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--cc-fg-strong) !important;
  padding: 10px 12px 4px !important;
  line-height: 1.35;
}

/* Enquiry button in product loop */
.woocommerce ul.products li.product .button.cc-enquiry-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 0;
  text-align: center;
  box-sizing: border-box;
  font-size: var(--cc-fs-control) !important;
  padding: 8px 16px !important;
}

/* Single product page enquiry button */
.cc-enquiry-btn {
  transition:
    background 0.2s ease,
    transform 0.1s ease;
}
.cc-enquiry-btn:hover {
  background: var(--cc-primary-600) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* 2026-06-17 owner: 客戶案例 / Past-client proof chip on loop cards (greenspark green
   chip). Rendered right after the thumbnail; the negative top margin lifts it onto the
   photo's lower edge, centred over the square image. Real client name comes from
   _cc_clients via cc_loop_case_chip_label() (part-02.php). */
.woocommerce ul.products li.product .cc-case-chip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: calc(100% - 20px);
  margin: -30px auto 6px;
  padding: 4px 11px;
  background: #2e9e6b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.woocommerce ul.products li.product .cc-case-chip .cc-case-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d6f3e3;
  flex: 0 0 auto;
}

/* ============================================================
   BLUE PT LOGO WATERMARK - reversible overlay on displayed product photos
   (owner 2026-06-17). Top-right corner: NEW badge owns top-left, the baked grey
   logo sits bottom-right, the green 客戶案例 chip sits bottom-centre. The wrapper
   .cc-pwm comes from the woocommerce_product_get_image filter (loop/related/cart);
   the PDP gallery uses its own positioned slide. pointer-events:none so the mark
   never intercepts clicks/zoom. Not baked into files - purely presentational.
   ============================================================ */
.cc-pwm {
  position: relative;
  display: block;
}
.woocommerce div.product .woocommerce-product-gallery__image {
  position: relative;
}
/* 2026-06-26 owner: REMOVE the top-right blue PT logo overlay across ALL photos
   ("the logo in top right, that only shd be removed across all photos"). The mark
   was purely presentational (::after, never baked into files), so disabling these
   rules clears it everywhere instantly - loop cards, related, cart, PDP gallery.
   The baked bottom-right logo + diagonal watermark in the source photos stay. */
.cc-pwm::after,
.woocommerce div.product .woocommerce-product-gallery__image::after {
  content: none;
  display: none;
}
/* min-width:0 lets the text flex-item shrink so text-overflow:ellipsis fires
   reliably (Safari/iOS needs the label in its own shrinkable span). */
.woocommerce ul.products li.product .cc-case-chip .cc-case-tx {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Product breadcrumb - owner: align the "首頁 » Shop » …" left edge to the header
   logo gutter. This theme renders the breadcrumb as .breadcrumb-trail /
   .woo-breadcrumbs (Breadcrumb-Trail/Yoast), NOT WooCommerce's
   .woocommerce-breadcrumb (the earlier edit targeted a selector that doesn't exist
   on the PDP, so it hugged the screen edge at x=8). Target all three. Centered
   max-width box like .pt-hdr-inner with padding-inline:0 - the auto margins supply
   the gutter; extra padding would double-indent. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .breadcrumb-trail,
.woocommerce .woo-breadcrumbs,
.single-product .breadcrumb-trail,
.single-product .woo-breadcrumbs {
  font-size: var(--cc-fs-small);
  /* 2026-06-18 owner: breadcrumb text is brand blue (was grey #888). */
  color: var(--cc-logo-blue);
  /* 2026-06-18 owner: left-anchored 3cm frame (was a centered max-width box that
     drifted from the logo); breadcrumb left edge now sits on the gutter line. */
  margin: 0 var(--cc-gutter) 1rem;
  max-width: none;
  padding-inline: 0;
  box-sizing: border-box;
}
.woocommerce .woocommerce-breadcrumb a,
.woocommerce .breadcrumb-trail a,
.woocommerce .woo-breadcrumbs a,
.single-product .breadcrumb-trail a,
.single-product .woo-breadcrumbs a {
  /* 2026-06-18 owner: breadcrumb links brand blue (was grey #888). */
  color: var(--cc-logo-blue);
}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .breadcrumb-trail a:hover,
.woocommerce .woo-breadcrumbs a:hover,
.single-product .breadcrumb-trail a:hover,
.single-product .woo-breadcrumbs a:hover {
  color: var(--cc-primary-500);
}

/* Product title */
.woocommerce div.product .product_title {
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  color: var(--cc-fg-strong) !important;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

/* Short description - appears below title on single product */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--cc-fs-body);
  color: #555;
  line-height: 1.7;
  margin-bottom: 1.4rem;
  border-left: 3px solid var(--cc-primary-500);
  padding-left: 0.9em;
}
.woocommerce div.product .woocommerce-product-details__short-description p {
  margin: 0;
}

/* Product gallery - thumbnail strip */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  border: 1px solid #ece8e0;
  border-radius: 4px;
  overflow: hidden;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: 3px;
  opacity: 0.7;
  border: 2px solid transparent;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--cc-primary-500);
}
/* 2026-06-17 owner: thumbnail strip must align under the main 504px photo -
   constrain to the same width + centre so both share one vertical axis. */
.woocommerce div.product div.images .flex-control-thumbs {
  width: min(504px, 100%);
  margin: 10px 0 0; /* 2026-06-18 owner: thumbs left-align under the photo (gutter line) */
}

/* PDP 2026-06-15 (owner): respect the 3cm site gutter both sides, lock every
   product photo to a fixed px square (contain, no crop/distortion), zoom off.
   px not cm: CSS cm is a device-independent 96dpi unit (10cm=378px) which
   physically measured ~7.5cm on the owner display; 504px = ~10 real cm (x10/7.5). */
.single-product.woocommerce div.product {
  /* 2026-06-17 owner: align the product photo left edge to the header logo. The
     centered max-width box (same as .pt-hdr-inner) already supplies the gutter via
     auto margins; an extra padding-inline:max(--cc-gutter,16px) DOUBLE-indented the
     gallery (gallery left measured 218px vs logo 117px). padding-inline:0 lands the
     gallery flush at the gutter (~109px ≈ logo). */
  padding-inline: 0;
  /* 2026-06-18 owner: left-anchored 3cm frame, NOT a centered max-width box. The PDP
     now fills the page edge-to-gutter like every other surface (header, archive); the
     photo left edge lands on the gutter line = the header logo, and the summary column
     expands to fill the right side instead of leaving dead space. */
  max-width: none;
  margin-inline: var(--cc-gutter);
  /* 2026-06-17 owner: the right column was BLANK. DOM order is
     gallery → cc-exemplar-col → cc-pdp-rail → summary, so a float:right summary
     can't rise above the two clear:left left-floats that precede it - it dropped
     below the photo. CSS grid with explicit column placement is order-proof:
     gallery + exemplar + rail stack in column 1, the summary (title /
     configurator / add-to-quote / description) pins to column 2 row 1, and the
     tabs / related row spans full width underneath. */
  display: grid;
  /* col1 hugs the 504px photo (left edge on the gutter line); col2 (summary) expands
     to fill the rest of the frame to the right gutter - owner: "expand to fit". */
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  column-gap: 4%;
  align-items: start;
}
.single-product.woocommerce div.product > .woocommerce-product-gallery,
.single-product.woocommerce div.product > .images,
.single-product.woocommerce div.product > .cc-pdp-rail,
.single-product.woocommerce div.product > .cc-exemplar-col {
  grid-column: 1;
  float: none;
  width: 100%;
  margin: 0 0 14px;
}
.single-product.woocommerce div.product > .summary.entry-summary {
  grid-column: 2;
  grid-row: 1;
  float: none;
  width: 100%;
  margin: 0;
}
.single-product.woocommerce div.product > .woocommerce-tabs,
.single-product.woocommerce div.product > .related,
.single-product.woocommerce div.product > .upsells,
.single-product.woocommerce div.product > .cc-pdp-fullrow {
  grid-column: 1 / -1;
  float: none;
  width: 100%;
}
@media (max-width: 768px) {
  /* single column - force a clean stack: photo first, then the title /
     configurator / add-to-quote, then the exemplar caption + assurance rail.
     Without explicit rows the summary's grid-row:1 would sit ABOVE the photo. */
  .single-product.woocommerce div.product {
    grid-template-columns: 1fr;
  }
  .single-product.woocommerce div.product > .woocommerce-product-gallery,
  .single-product.woocommerce div.product > .images {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .single-product.woocommerce div.product > .summary.entry-summary {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  .single-product.woocommerce div.product > .cc-exemplar-col {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
  }
  .single-product.woocommerce div.product > .cc-pdp-rail {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
  }
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  text-align: center;
}
/* clip the flexslider viewport to the 10cm box so only ONE slide shows
   (without this the wider viewport peeks the next slide). */
.woocommerce div.product div.images .flex-viewport {
  width: min(504px, 100%) !important;
  max-width: 100%;
  margin: 0; /* 2026-06-18 owner: left-align photo to the gutter line, not centered */
  overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  width: min(504px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  margin: 0 !important; /* 2026-06-18 owner: photo left edge on the gutter line */
  display: flex;
  align-items: center;
  justify-content: center;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery__image > a img,
.woocommerce div.product div.images .woocommerce-product-gallery__image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* Reputable-client exemplar caption - sits in the images column under the 10cm photo
   (2026-06-15 owner). Single most-reputable client per product, text mark only (no
   logo), gold accent. Width-matched to the 10cm square so it reads as one unit. */
/* Column wrapper: clears under the floated gallery and matches the images
   column width so the caption centres beneath the 10cm photo. */
.woocommerce div.product .cc-exemplar-col {
  float: left;
  clear: left;
  width: 48%;
}
@media (max-width: 768px) {
  .woocommerce div.product .cc-exemplar-col {
    float: none;
    clear: both;
    width: 100%;
  }
}
.cc-exemplar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(504px, 100%);
  margin: 10px auto 0;
  padding: 8px 12px;
  background: rgba(193, 154, 76, 0.07);
  border: 1px solid #e4d2a8;
  border-left: 3px solid #c19a4c;
  border-radius: 6px;
  font-family: var(--cc-font-display, Georgia, "Songti SC", serif);
  font-size: var(--cc-fs-small);
  line-height: 1.35;
  color: #5a4a28;
}
.cc-exemplar-ico {
  flex: 0 0 auto;
  color: var(--cc-rating-gold, #c6a022);
  font-size: var(--cc-fs-small);
}
.cc-exemplar-txt {
  font-weight: 500;
}
/* PDP assurance rail (2026-06-17 owner) - fills the dead left-column white space
   under the product photo, width-matched to it. Always shown (even with no client
   exemplar) so the column never reads blank. */
.cc-pdp-rail {
  width: min(504px, 100%);
  margin: 10px auto 0;
  border: 1px solid var(--cc-border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.cc-pdp-rail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--cc-border-soft);
}
.cc-pdp-rail-row:last-child {
  border-bottom: 0;
}
.cc-pdp-rail-k {
  flex: 0 0 86px;
  font-family: var(--cc-font-display, Georgia, serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--cc-primary-700);
}
.cc-pdp-rail-v {
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-500);
  letter-spacing: 0.01em;
}
/* Product summary area */
.woocommerce div.product div.summary {
  padding-left: 2rem;
}
@media (max-width: 768px) {
  .woocommerce div.product div.summary {
    padding-left: 0;
  }
}

/* "Request a Quote" button area clean spacing */
.woocommerce div.product .cc-enquiry-btn {
  margin-top: 1rem !important;
}

/* Hide $0 prices globally (catalogue mode) */
.woocommerce-Price-amount.amount {
  display: none;
}

/* Show price in cart/checkout only */
.woocommerce-cart .woocommerce-Price-amount.amount,
.woocommerce-checkout .woocommerce-Price-amount.amount {
  display: inline !important;
}

/* ============================================================
   CATALOGUE MODE - Hide cart UI
   ============================================================ */
.elementor-menu-cart__wrapper,
.elementor-menu-cart__container,
.woocommerce-mini-cart,
a.cart-contents,
.wc-block-mini-cart,
.widget_shopping_cart,
.cart-icon,
.cc-cart-count {
  display: none !important;
}

/* ============================================================
   SHOP / CATEGORY - Sidebar & widget
   ============================================================ */
.woocommerce .widget_product_categories .product-categories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce .widget_product_categories li {
  border-bottom: 1px solid #f0ebe3;
  padding: 6px 0;
}
.woocommerce .widget_product_categories li a {
  color: #444;
  font-size: var(--cc-fs-control);
  transition: color 0.15s;
}
.woocommerce .widget_product_categories li a:hover,
.woocommerce .widget_product_categories .current-cat > a {
  color: var(--cc-primary-500);
  font-weight: 600;
}

/* ============================================================
   ENQUIRY FORM - Contact page
   ============================================================ */
.elementor-form .elementor-field-group {
  margin-bottom: 1.2rem;
}
.elementor-form .elementor-field-label {
  font-size: var(--cc-fs-control);
  font-weight: 600;
  color: var(--cc-fg);
  margin-bottom: 0.3rem;
}
.elementor-form .elementor-field-textual,
.elementor-form .elementor-field-select {
  border: 1px solid #d8d2c8 !important;
  border-radius: 3px !important;
  padding: 10px 14px !important;
  font-size: var(--cc-fs-control) !important;
  transition: border-color 0.2s !important;
}
.elementor-form .elementor-field-textual:focus,
.elementor-form .elementor-field-select:focus {
  border-color: var(--cc-primary-500) !important;
  outline: none;
}
.elementor-form .elementor-button[type="submit"] {
  background: var(--cc-primary-500) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  padding: 12px 32px !important;
  letter-spacing: 0.05em;
  transition:
    background 0.2s,
    transform 0.15s !important;
}
.elementor-form .elementor-button[type="submit"]:hover {
  background: var(--cc-primary-700) !important;
  transform: translateY(-1px);
}

/* ============================================================
   CATEGORY INTRO - WooCommerce archive
   ============================================================ */
.woocommerce-products-header__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--cc-fg-strong);
  margin-bottom: 0.5rem;
}
.woocommerce-products-header .woocommerce-product-subcategories {
  display: none;
}

/* WooCommerce archive - result count & ordering bar */
.woocommerce-result-count {
  font-size: var(--cc-fs-small);
  color: #888;
}
.woocommerce-ordering select {
  border: 1px solid #d8d2c8;
  border-radius: 3px;
  font-size: var(--cc-fs-control);
  padding: 5px 10px;
  color: #444;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: #444 !important;
  border-color: #e0d9cf !important;
  font-size: var(--cc-fs-control);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--cc-primary-500) !important;
  border-color: var(--cc-primary-500) !important;
  color: #fff !important;
}

/* ============================================================
   LANGUAGE SWITCHER - EN pill in header
   ============================================================ */
.lang-switcher-en > a.elementor-item {
  font-size: var(--cc-fs-control) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  border: 1px solid currentColor !important;
  border-radius: 3px !important;
  padding: 3px 9px !important;
  opacity: 0.75;
  transition: opacity 0.18s !important;
}
.lang-switcher-en > a.elementor-item:hover {
  opacity: 1;
}

/* ============================================================
   WOOLENTOR PRODUCT WIDGET
   ============================================================ */
.wl-product-wrap {
  border: 1px solid #ece8e0 !important;
  border-radius: 6px !important;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s !important;
}
.wl-product-wrap:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}
.wl-product-wrap .wl-product-title a {
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--cc-fg-strong) !important;
}

/* ============================================================
   QUICK CONTACT BUTTON
   ============================================================ */
.e-contact-buttons__cta-button {
  background: var(--cc-primary-500) !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #fff !important;
  text-decoration: none !important;
}
.e-contact-buttons__cta-button:hover {
  background: var(--cc-primary-700) !important;
}

/* ============================================================
   PDP CTA ROW - 索取報價 (primary) + WhatsApp 查詢 (ghost-WA)
   2026-05-29 refinement: heavy green solid + heavy blue solid read as
   two competing CTAs. Now primary blue solid stays the lead, WhatsApp
   becomes a ghost outline with a WA-green accent - same weight as a
   "secondary nav" link, not a duplicate primary.
   ============================================================ */
.cc-enquiry-btn,
.cc-whatsapp-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px !important;
  font-size: var(--cc-fs-control) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  /* R53: border-radius removed from global rule; loop cards keep 3px from base.
     Single-product PDP gets 6px via .single-product scope below. */
  text-decoration: none !important;
  vertical-align: middle;
  transition:
    background var(--cc-dur-fast) ease,
    color var(--cc-dur-fast) ease,
    border-color var(--cc-dur-fast) ease,
    transform var(--cc-dur-fast) ease,
    box-shadow var(--cc-dur-fast) ease !important;
}
.cc-enquiry-btn {
  background: var(--cc-primary-700) !important;
  color: #fff !important;
  border: 1px solid var(--cc-primary-700) !important;
  margin-right: 10px !important;
  margin-top: 14px !important;
  box-shadow: 0 2px 8px -3px rgba(20, 30, 80, 0.35);
}
.cc-enquiry-btn:hover {
  background: var(--cc-primary-800) !important;
  border-color: var(--cc-primary-800) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(20, 30, 80, 0.45);
}
.cc-enquiry-btn .pt-arr {
  display: inline-block;
  transition: transform var(--cc-dur-fast) ease;
}
.cc-enquiry-btn:hover .pt-arr {
  transform: translateX(3px);
}

.cc-whatsapp-btn {
  background: #fff !important;
  color: #1ea54d !important;
  border: 1px solid #c8e6d2 !important;
  margin-top: 14px !important;
  position: relative;
  padding-left: 42px !important;
}
.cc-whatsapp-btn::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: #25d366;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z'/></svg>")
    center / contain no-repeat;
}
.cc-whatsapp-btn:hover {
  background: #f0faf3 !important;
  border-color: #1ea54d !important;
  color: #1ea54d !important;
  transform: translateY(-1px);
}
/* R53: 6px radius scoped to PDP only; loop cards keep the 3px base (~line 476) */
.single-product .cc-enquiry-btn,
.single-product .cc-whatsapp-btn {
  border-radius: 6px !important;
}

/* ============================================================
   PDP CTA ROW - Add-to-Quote (加入報價單, .cc-atq-wrap from the
   cc-quote-cart mu-plugin) + WhatsApp enquiry (.cc-pdp-cta-wa)
   sit side by side in the configurator summary column.
   2026-06-18 owner: WhatsApp moved out of the bottom band to here.
   The two are adjacent siblings; inline-flex lets them share a row
   and wrap cleanly on narrow screens (390px).
   ============================================================ */
.single-product.woocommerce .summary.entry-summary .cc-atq-wrap {
  display: inline-flex;
  vertical-align: top;
  margin: 14px 10px 0 0;
}
.single-product.woocommerce .summary.entry-summary .cc-pdp-cta-wa {
  display: inline-flex;
  vertical-align: top;
}
/* Match the WhatsApp button height to the Add-to-Quote primary button so the
   two line up; drop the default 14px top margin (the row gap is on the wraps). */
.single-product.woocommerce
  .summary.entry-summary
  .cc-pdp-cta-wa
  .cc-whatsapp-btn {
  margin-top: 14px !important;
}
@media (max-width: 600px) {
  /* Stack full-width on mobile so each CTA gets its own row and taps cleanly. */
  .single-product.woocommerce .summary.entry-summary .cc-atq-wrap,
  .single-product.woocommerce .summary.entry-summary .cc-pdp-cta-wa {
    display: flex;
    width: 100%;
    margin-right: 0;
  }
  .single-product.woocommerce .summary.entry-summary .cc-atq-wrap .cc-atq,
  .single-product.woocommerce
    .summary.entry-summary
    .cc-pdp-cta-wa
    .cc-whatsapp-btn {
    width: 100%;
  }
}

/* ============================================================
   CUSTOMIZATION HINTS - Single product page
   ============================================================ */
.cc-customization-hints {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
}
.cc-customization-hints li {
  font-size: var(--cc-fs-small);
  color: #666;
  letter-spacing: 0.02em;
}

/* ============================================================
   PRODUCT TRUST BADGE - below CTAs on single product
   ============================================================ */
.cc-pd-trust {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-400);
  margin-top: 14px;
  letter-spacing: 0.02em;
}
/* 2026-06-18 owner: shield icon removed from the trust line - the
   .cc-pd-trust svg styling is dropped (no SVG renders anymore). */

/* ============================================================
   PDP BOTTOM BAND - full-width WhatsApp + trust + 分類/標籤 meta
   (owner 2026-06-17: "align to left, increase font size to
   encompass whole page"). Spans the full gutter frame under the
   gallery+summary grid, left-aligned, larger type.
   ============================================================ */
.cc-pdp-band {
  margin-top: 10px;
  padding: 26px 0 6px;
  border-top: 1px solid var(--cc-border, #e6e1d6);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* 2026-06-18 owner: WhatsApp CTA moved out of the bottom band to the
   configurator CTA row (beside Add-to-Quote), so the band-scoped WhatsApp
   sizing rule is dropped. */
.cc-pdp-band .cc-pd-trust {
  margin-top: 0;
  font-size: 1.06rem;
  color: var(--cc-fg, #2a2a2a);
  justify-content: flex-start;
  text-align: left;
  letter-spacing: 0.01em;
}
/* 2026-06-18 owner: shield icon removed - bottom-band trust line is text only. */
.cc-pdp-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--cc-fg, #2a2a2a);
}
.cc-pdp-meta-k {
  font-weight: 700;
  color: var(--cc-fg-strong, #1a1a1a);
  margin-right: 8px;
}
.cc-pdp-meta a {
  color: var(--cc-logo-blue-deep, #2f6379);
  text-decoration: none;
}
.cc-pdp-meta a:hover {
  text-decoration: underline;
}

/* ============================================================
   客戶案例 / Case-study badge + PDP case CTA (owner mockup 2026-06-17)
   Green = "has documented case" (matches the loop client-proof chip);
   distinct from gold (rating) and brand blue. Literal colours - the
   --cc-fg-strong token is aliased to blue, so never use it for contrast.
   ============================================================ */
.cc-casebadge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 4px rgba(20, 30, 25, 0.18);
  /* Decorative overlay - let clicks fall through to the card link beneath. */
  pointer-events: none;
}
.cc-casebadge .cc-casebadge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.cc-casebadge.is-has {
  background: #eaf7ef;
  color: #14773f;
  border: 1px solid rgba(20, 119, 63, 0.28);
}
.cc-casebadge.is-has .cc-casebadge-dot {
  background: #1f9a52;
}
.cc-casebadge.is-none {
  background: rgba(245, 245, 245, 0.92);
  color: #6b7078;
  border: 1px solid rgba(120, 125, 132, 0.3);
}
.cc-casebadge.is-none .cc-casebadge-dot {
  background: #aeb3ba;
}
/* Host figure must be relative so the badge anchors to the photo. */
.cc-catcard .elementor-image-box-img {
  position: relative;
}

/* PDP 真實客戶案例 block - lives inside .cc-pdp-band, full width. */
.cc-pdp-case {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(20, 119, 63, 0.22);
  border-left: 4px solid #1f9a52;
  border-radius: 10px;
  background: #f4faf6;
}
.cc-pdp-case .cc-casebadge {
  position: static;
  box-shadow: none;
}
.cc-pdp-case-tx {
  font-size: 1.06rem;
  font-weight: 600;
  color: #223344;
}
.cc-pdp-case-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  background: #1f9a52;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none !important;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.cc-pdp-case-btn:hover {
  background: #16823f;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .cc-pdp-case-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   [cc_banner_rotator] - all-collections banner rotator page (2026-06-17)
   ============================================================ */
.cc-rotator {
  padding: 40px var(--cc-gutter, 24px) 56px;
}
.cc-rotator-head {
  text-align: center;
  margin: 0 auto 26px;
}
.cc-rotator-h {
  font-family: var(--cc-font-serif-tc, "Noto Serif TC", serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: #1a2730;
  margin: 0 0 8px;
}
.cc-rotator-sub {
  font-size: 1.02rem;
  color: #5b6770;
  margin: 0;
}
.cc-rot-swiper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(20, 30, 40, 0.16);
}
.cc-rot-slide {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #0d1a21;
}
.cc-rot-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
}
.cc-rot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-rot-media--cover .cc-rot-img {
  filter: brightness(0.82);
}
.cc-rot-coverttl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 28px 26px;
  font-family: var(--cc-font-serif-tc, "Noto Serif TC", serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  background: linear-gradient(
    to top,
    rgba(8, 16, 22, 0.82),
    rgba(8, 16, 22, 0)
  );
}
.cc-rot-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  background: #fff;
}
.cc-rot-cap-ttl {
  font-family: var(--cc-font-serif-tc, "Noto Serif TC", serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a2730;
}
.cc-rot-cap-go {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cc-logo-blue, #407090);
  white-space: nowrap;
}
.cc-rot-slide:hover .cc-rot-cap-go {
  text-decoration: underline;
}
/* arrows - vertically centred over the media */
.cc-rot-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #1a2730;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: background 0.2s ease;
}
.cc-rot-arrow:hover {
  background: #fff;
}
.cc-rot-prev {
  left: 16px;
}
.cc-rot-next {
  right: 16px;
}
/* index + dots overlay near the bottom of the media (above the caption) */
.cc-rot-index {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 6;
  font-family: var(--cc-font-mono, monospace);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(13, 26, 33, 0.55);
  padding: 4px 10px;
  border-radius: 999px;
}
.cc-rot-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 78px;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.cc-rot-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cc-rot-dots .swiper-pagination-bullet-active {
  background: #fff;
  width: 24px;
  border-radius: 5px;
}
@media (max-width: 600px) {
  .cc-rot-cap {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
  }
  .cc-rot-dots {
    bottom: 92px;
  }
  .cc-rot-arrow {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
}

/* ============================================================
   PRODUCT SPEC TABLE - material / size / customisation / lead time
   ============================================================ */
.cc-spec {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--cc-surface-warm);
  border-radius: var(--cc-r-lg);
  border: 1px solid var(--cc-border);
}
.cc-spec-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: baseline;
}
.cc-spec dt {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400);
  letter-spacing: 0.04em;
}
.cc-spec dd {
  margin: 0;
  font-size: var(--cc-fs-small);
  color: var(--cc-fg-strong);
}

/* ============================================================
   BUTTON SYSTEM - portable token-based classes
   (Use on non-Elementor / direct PHP output surfaces)
   ============================================================ */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--cc-font-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--cc-dur-base) var(--cc-ease-out),
    transform var(--cc-dur-fast) var(--cc-ease-out),
    border-color var(--cc-dur-base);
}
.cc-btn-primary {
  background: var(--cc-gold-500);
  color: #fff !important; /* beats Elementor kit's .elementor-kit-N a link colour */
  padding: 12px 26px;
  font-size: var(--cc-fs-control);
  border-radius: var(--cc-r-sm);
}
.cc-btn-primary:hover {
  background: var(--cc-gold-700);
  transform: translateY(-1px);
  color: #fff !important;
}
.cc-btn-primary:active {
  background: var(--cc-gold-600);
  transform: translateY(0);
}
.cc-btn-secondary {
  background: #fff;
  color: var(--cc-fg-strong) !important;
  border: 1px solid var(--cc-border-strong);
  padding: 11px 22px;
  font-size: var(--cc-fs-control);
  border-radius: var(--cc-r-sm);
}
.cc-btn-secondary:hover {
  border-color: var(--cc-gold-500);
  color: var(--cc-gold-700) !important;
}
.cc-btn-ghost {
  background: transparent;
  color: var(--cc-fg) !important;
  padding: 10px 14px;
  font-size: var(--cc-fs-control);
}
.cc-btn-ghost:hover {
  color: var(--cc-gold-500) !important;
}
.cc-btn-lg {
  padding: 14px 32px;
  font-size: var(--cc-fs-control);
}
.cc-btn-sm {
  padding: 8px 16px;
  font-size: var(--cc-fs-control);
}
.cc-btn-block {
  width: 100%;
}

/* ============================================================
   LOGO LOCKUP - header / footer use
   ============================================================ */
.cc-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.cc-logo-mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.cc-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.cc-logo-zh {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cc-fg-strong);
  letter-spacing: 0.1em;
}
.cc-logo-en {
  font-family: var(--cc-font-display);
  font-variant: small-caps;
  font-weight: 600;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-600);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* ============================================================
   HERO TRUST BAR - dark bar below hero carousel
   ============================================================ */
.cc-hero-trustbar {
  background: var(--cc-brand-bg);
  color: #fff;
}
.cc-trustbar-inner {
  max-width: var(--cc-container-wide);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cc-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cc-fs-small);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.03em;
}
.cc-trust-item strong {
  color: #fff;
  font-weight: 600;
}
.cc-trust-item svg,
.cc-trust-item .cc-icon {
  color: var(--cc-accent-gold-bright); /* R17: was blue via --cc-gold-300 */
  flex-shrink: 0;
}

/* ============================================================
   HERO CONTENT OVERLAY - headline, sub, CTA over carousel
   ============================================================ */
.cc-hero-eyebrow {
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-gold-200);
  margin-bottom: 18px;
  opacity: 0.9;
}
.cc-hero-title {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 14px;
  text-shadow: var(--cc-shadow-hero-text);
  color: #fff;
}
.cc-hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 0 0 26px;
  text-shadow: var(--cc-shadow-hero-text);
}
.cc-hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.cc-hero-dot {
  width: 24px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  transition: background var(--cc-dur-base);
}
.cc-hero-dot.is-active {
  background: var(--cc-accent-gold-bright); /* R17: active dot → real gold */
}

/* ============================================================
   DARK FOOTER UTILITIES - for Elementor-built footer sections
   ============================================================ */
.cc-footer-dark {
  background: var(--cc-brand-bg);
  color: rgba(255, 255, 255, 0.7);
}
.cc-footer-head {
  font-size: var(--cc-fs-small);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.cc-footer-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--cc-dur-fast);
}
.cc-footer-link:hover {
  color: var(--cc-gold-300) !important;
}
.cc-footer-tag {
  font-size: var(--cc-fs-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}
.cc-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 0;
  font-size: var(--cc-fs-small);
  color: rgba(255, 255, 255, 0.4);
}
/* Footer logo in dark context */
.cc-footer-dark .cc-logo-zh {
  color: #fff;
}
.cc-footer-dark .cc-logo-en {
  color: var(--cc-gold-300);
}

/* ============================================================
   BILINGUAL HELPERS
   ============================================================ */
.cc-bi-sep {
  color: var(--cc-ink-200);
  margin: 0 6px;
}
.cc-bi-en {
  color: var(--cc-ink-400);
  font-weight: 400;
}

/* ============================================================
   SECTION EYEBROW - centered gold-rule variant
   ============================================================ */
.cc-eyebrow-wrap {
  padding: 4px 0 0;
  margin: 0 0 36px;
}
.cc-eyebrow-center {
  text-align: center;
}
.cc-eyebrow-left {
  text-align: left;
}
.cc-eyebrow-text {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-fg-strong);
  margin: 0;
}
.cc-eyebrow-rule {
  width: 28px;
  height: 1px;
  background: var(--cc-ink-300);
  margin: 12px 0 0;
}
.cc-eyebrow-center .cc-eyebrow-rule {
  margin: 12px auto 0;
}

/* ============================================================
   PILL - language switcher, filter chips
   ============================================================ */
.cc-pill {
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  background: transparent;
  border-radius: var(--cc-r-sm);
  padding: 3px 9px;
  color: var(--cc-fg);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 180ms;
}
.cc-pill:hover {
  opacity: 1;
}
.cc-pill.is-active {
  opacity: 1;
  color: var(--cc-gold-600);
}

/* ============================================================
   INPUT FOCUS - accessible gold ring (a11y patch)
   ============================================================ */
.cc-input:focus,
.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
  outline: none;
  border-color: var(--cc-gold-500) !important;
  box-shadow: var(--cc-focus) !important;
}

/* ============================================================
   TYPOGRAPHY UTILITIES - token-based semantic classes
   ============================================================ */
.cc-h1 {
  font-family: var(--cc-font-sans);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cc-fg-strong);
  letter-spacing: -0.01em;
}
.cc-h2 {
  font-family: var(--cc-font-sans);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--cc-fg-strong);
}
.cc-display-tc {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.25;
  color: var(--cc-fg-strong);
}
.cc-wordmark {
  font-family: var(--cc-font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--cc-fg-strong);
}
.cc-meta {
  font-size: var(--cc-fs-micro);
  color: var(--cc-fg-quiet);
  letter-spacing: 0.04em;
}
.cc-rule-gold {
  width: 36px;
  height: 3px;
  background: var(--cc-primary);
  border: 0;
}

/* ============================================================
   CONTENT-PAGE STOPGAP - About / Cases / Craft shortcode output
   ============================================================ */
.cc-content-page {
  padding: 64px 24px 80px;
  background: var(--cc-surface);
}
.cc-content-inner {
  max-width: var(--cc-container-narrow);
  margin: 0 auto;
  text-align: center;
}
.cc-content-page .cc-eyebrow-text {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-fg-strong);
  margin: 0;
}
.cc-content-rule {
  margin: 12px auto 22px;
}
.cc-content-page .cc-h1 {
  margin: 0 0 26px;
}
.cc-content-body {
  font-size: var(--cc-fs-body);
  line-height: 1.85;
  color: var(--cc-fg);
  margin-bottom: 32px;
  text-align: left;
}
.cc-content-body p {
  margin: 0 0 1.1em;
}
.cc-content-body p:last-child {
  margin-bottom: 0;
}
.cc-content-page .cc-btn-primary {
  display: inline-flex;
}

/* ──────────────────────────────────────────────────────────
   DEAD-NAV-PAGE TEMPLATES (.pg-*)
   Page-level styles for 關於我們 / 客戶案例 / 藝術工藝.
   Rendered via the [cc_about_page] / [cc_cases_page] /
   [cc_art_page] shortcodes (see functions.php). The --cc-*
   custom properties used below are defined earlier in this
   file. .cc-btn / .cc-btn-primary already exist above.
   ────────────────────────────────────────────────────────── */

/* ── Section wrappers ──────────────────────────────────── */
.pg-section {
  padding: 88px 0;
}
.pg-section.alt {
  background: var(--cc-surface-warm);
}
.pg-section.dark {
  background: var(--cc-surface-cream);
  color: var(--cc-ink-900);
  /* Owner's mother, 2026-09-07: change order process from dark to light.
     Contrast ratio --cc-surface-cream + --cc-ink-900 exceeds 7.0:1 WCAG AAA. */
}
.pg-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.pg-section-inner.narrow {
  max-width: 880px;
}
@media (max-width: 720px) {
  .pg-section {
    padding: 56px 0;
  }
  .pg-section-inner {
    padding: 0 16px;
  }
}

/* ── Eyebrow + display heading combo ───────────────────── */
.pg-eyebrow {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-fg-strong);
  margin: 0;
}
.pg-eyebrow-en {
  color: var(--cc-ink-300);
  margin-left: 10px;
  font-weight: 500;
}
.pg-rule {
  width: 36px;
  height: 3px;
  background: var(
    --cc-accent-gold-bright
  ); /* R17: decorative rule → real gold */
  margin: 14px 0 22px;
  border: 0;
}
.pg-display {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.2;
  color: var(--cc-fg-strong);
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
.pg-display-en {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--cc-ink-400);
  margin-top: 12px;
  letter-spacing: 0.01em;
}
.pg-lede {
  font-size: var(--cc-fs-lead);
  line-height: 1.75;
  color: var(--cc-ink-600);
  max-width: 640px;
  margin: 28px 0 0;
  text-wrap: pretty;
}

/* ── Hero block (page banner) ──────────────────────────── */
.pg-hero {
  position: relative;
  padding: 96px 0 80px;
  background: var(--cc-surface-warm);
  overflow: hidden;
}
.pg-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.pg-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
/* Owner + his mother, 2026-09-07: "no black bg on the order process page".
   The image is sized `contain`, so it never fills the 4:3 box and the fill
   colour shows as a dark slab around it. #0b1a2f is that slab. The page ground
   is the right colour here: the photograph then sits on the page rather than in
   a black frame. */
.pg-hero-image {
  aspect-ratio: 4/3;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--cc-surface-warm, #f7f5f2);
  background-position: center;
  border-radius: 3px;
  box-shadow: var(--cc-shadow-2);
}
.pg-hero-corner-mark {
  position: absolute;
  right: 24px;
  top: 24px;
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 100px;
  line-height: 1;
  color: rgba(32, 80, 160, 0.08);
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.02em;
}
@media (max-width: 900px) {
  .pg-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pg-hero-corner-mark {
    display: none;
  }
}

/* ── Stats strip ───────────────────────────────────────── */
.pg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  background: #fff;
}
.pg-stat {
  padding: 36px 28px;
  border-right: 1px solid var(--cc-border);
}
.pg-stat:last-child {
  border-right: 0;
}
.pg-stat-num {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--cc-fg-strong);
  letter-spacing: -0.01em;
}
.pg-stat-unit {
  font-size: 18px;
  color: var(--cc-ink-400);
  margin-left: 2px;
  font-family: var(--cc-font-serif-tc);
}
.pg-stat-label {
  margin-top: 10px;
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-500);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.pg-stat-label-en {
  display: block;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-300);
  margin-top: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--cc-font-display);
}
@media (max-width: 720px) {
  .pg-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-stat {
    border-bottom: 1px solid var(--cc-border);
  }
  .pg-stat:nth-child(2n) {
    border-right: 0;
  }
  .pg-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* ── Story block (2-col) ───────────────────────────────── */
.pg-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.pg-story-image {
  aspect-ratio: 4/5;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #0b1a2f;
  background-position: center;
  border-radius: 3px;
}
.pg-story-text p {
  font-size: var(--cc-fs-body);
  line-height: 1.85;
  color: var(--cc-ink-600);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.pg-story-text p:first-of-type {
  font-size: var(--cc-fs-lead);
  color: var(--cc-fg-strong);
  line-height: 1.75;
}
.pg-story-sig {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cc-border);
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-500);
}
.pg-story-sig-name {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  color: var(--cc-fg-strong);
  font-size: 15px;
}
@media (max-width: 900px) {
  .pg-story {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── Services grid (6-up) ──────────────────────────────── */
.pg-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cc-border);
  border: 1px solid var(--cc-border);
  border-radius: 3px;
  overflow: hidden;
}
.pg-service {
  background: #fff;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pg-service-num {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: var(--cc-fs-micro);
  color: var(--cc-gold-500);
  letter-spacing: 0.14em;
}
.pg-service-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h3);
  color: var(--cc-fg-strong);
  margin: 4px 0 2px;
}
.pg-service-en {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--cc-ink-400);
  letter-spacing: 0.03em;
  font-style: italic;
  margin-bottom: 6px;
}
.pg-service-desc {
  font-size: var(--cc-fs-body);
  line-height: 1.7;
  color: var(--cc-ink-500);
}
@media (max-width: 900px) {
  .pg-services {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pg-services {
    grid-template-columns: 1fr;
  }
}

/* ── Capability strip (horizontal pill row) ────────────── */
.pg-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.pg-cap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--cc-border-strong);
  border-radius: 999px;
  font-size: var(--cc-fs-control);
  color: var(--cc-fg);
  background: #fff;
}
.pg-cap-dot {
  width: 6px;
  height: 6px;
  background: var(--cc-gold-500);
  border-radius: 50%;
}
.pg-cap-en {
  color: var(--cc-ink-300);
  font-size: var(--cc-fs-micro);
  font-family: var(--cc-font-display);
  font-style: italic;
}

/* ── Closing CTA block ─────────────────────────────────── */
/* 媽媽, 2026-09-16 11:25, on a screenshot of this band: 轉藍底白字. It was near-black with
   cream text, which is the only dark-brown surface left on a site whose every other band is
   the company blue. White on the logo blue, and the headline, the English line and the ghost
   button all move with it so nothing is left reading cream on blue. */
.pg-cta {
  background: var(--cc-logo-blue-deep, #15305a);
  color: #ffffff;
  padding: 80px 0;
  text-align: center;
}
.pg-cta-display {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  /* !important because a theme heading rule was winning here and rendering the line in a
     muted blue against the new blue band, which is the opposite of 藍底白字. */
  color: #ffffff !important;
  margin: 0;
  line-height: 1.3;
}
.pg-cta-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-lead);
  color: rgba(255, 255, 255, 0.72);
  margin: 14px 0 32px;
}
.pg-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cc-btn-ghost-light {
  background: transparent;
  color: #ffffff;
  padding: 14px 28px;
  font-size: var(--cc-fs-control);
  border-radius: 2px;
  border: 1px solid rgba(246, 239, 222, 0.3);
}
.cc-btn-ghost-light:hover {
  border-color: var(--cc-gold-500);
  color: var(--cc-gold-300);
}

/* ── Filter chips (case studies) ───────────────────────── */
.pg-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 32px 0 48px;
}
.pg-filter {
  padding: 8px 16px;
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-500);
  border: 1px solid var(--cc-border);
  background: #fff;
  border-radius: 999px;
  transition: all 150ms;
}
.pg-filter:hover {
  color: var(--cc-gold-600);
  border-color: var(--cc-gold-300);
}
.pg-filter.is-active {
  color: #fff;
  background: var(--cc-ink-900);
  border-color: var(--cc-fg-strong);
}
.pg-filter-count {
  color: var(--cc-ink-300);
  margin-left: 4px;
  font-size: var(--cc-fs-micro);
}
.pg-filter.is-active .pg-filter-count {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Case cards (3-up grid) ────────────────────────────── */
.pg-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pg-case {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 3px;
  overflow: hidden;
  transition:
    box-shadow 250ms var(--cc-ease-out),
    transform 250ms var(--cc-ease-out);
}
.pg-case:hover {
  box-shadow: var(--cc-shadow-card-hover);
  transform: translateY(-2px);
}
.pg-case-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
}
.pg-case-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: var(--cc-fs-micro);
  padding: 4px 10px;
  letter-spacing: 0.08em;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.pg-case-body {
  padding: 22px 24px 26px;
}
.pg-case-year {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-micro);
  color: var(--cc-gold-500);
  letter-spacing: 0.12em;
}
.pg-case-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h3);
  color: var(--cc-fg-strong);
  margin: 6px 0 6px;
  line-height: 1.4;
  text-wrap: balance;
}
.pg-case-meta {
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-500);
  margin-bottom: 14px;
}
.pg-case-spec {
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-400);
  padding-top: 14px;
  border-top: 1px solid var(--cc-border);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pg-case-spec b {
  color: var(--cc-fg);
  font-weight: 600;
  margin-right: 4px;
}
@media (max-width: 900px) {
  .pg-cases {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pg-cases {
    grid-template-columns: 1fr;
  }
}

.pg-cases-note {
  font-size: 12px;
  color: var(--cc-ink-300);
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--cc-border);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ── Numbers strip (cases) ─────────────────────────────── */
.pg-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: end;
}
.pg-num-big {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  color: var(--cc-fg-strong);
  letter-spacing: -0.02em;
}
.pg-num-label {
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-500);
  margin-top: 12px;
  line-height: 1.6;
}
.pg-num-en {
  display: block;
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-300);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .pg-numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }
}

/* ── Materials grid (craft) ────────────────────────────── */
.pg-materials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.pg-material {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 220px;
}
.pg-material-img {
  background-size: cover;
  background-position: center;
  background-color: var(--cc-surface-cream);
}
.pg-material-body {
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
}
.pg-material-num {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-micro);
  color: var(--cc-gold-500);
  letter-spacing: 0.14em;
}
.pg-material-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h2);
  color: var(--cc-fg-strong);
  margin: 6px 0 2px;
}
.pg-material-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--cc-ink-400);
  margin-bottom: 14px;
}
.pg-material-desc {
  font-size: var(--cc-fs-body);
  line-height: 1.7;
  color: var(--cc-ink-500);
  margin-bottom: auto;
}
.pg-material-swatch-row {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}
.pg-material-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.pg-material-meta {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-300);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cc-border);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .pg-materials {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .pg-material {
    grid-template-columns: 1fr;
  }
  .pg-material-img {
    aspect-ratio: 16/9;
  }
}

/* ── Process timeline (6-step) ─────────────────────────── */
.pg-process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  counter-reset: step;
  position: relative;
}
.pg-process::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 30px;
  right: 30px;
  height: 1px;
  background: var(--cc-border);
}
.pg-step {
  position: relative;
  padding: 0 16px;
}
.pg-step-dot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--cc-fg-strong);
  position: relative;
  z-index: 1;
  margin: 0 auto 18px;
}
.pg-step:nth-child(1) .pg-step-dot {
  background: var(--cc-gold-500);
  color: #fff;
  border-color: var(--cc-gold-500);
}
.pg-step-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: 15px;
  color: var(--cc-fg-strong);
  text-align: center;
  margin-bottom: 6px;
}
.pg-step-en {
  font-size: var(--cc-fs-micro);
  font-family: var(--cc-font-display);
  font-style: italic;
  color: var(--cc-ink-400);
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.pg-step-desc {
  font-size: var(--cc-fs-small);
  line-height: 1.6;
  color: var(--cc-ink-500);
  text-align: center;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .pg-process {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 0;
  }
  .pg-process::before {
    display: none;
  }
}
@media (max-width: 560px) {
  .pg-process {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Custom-finish table (craft) ───────────────────────── */
.pg-finishes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--cc-border);
  border-radius: 3px;
  overflow: hidden;
  background: var(--cc-border);
  margin-top: 8px;
}
.pg-finish {
  background: #fff;
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
}
.pg-finish-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h3);
  color: var(--cc-fg-strong);
}
.pg-finish-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400);
  letter-spacing: 0.04em;
  margin-top: -6px;
}
.pg-finish-desc {
  font-size: var(--cc-fs-small);
  line-height: 1.7;
  color: var(--cc-ink-500);
}
.pg-finish-use {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--cc-border);
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-300);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.pg-finish-use b {
  color: var(--cc-fg);
  font-weight: 600;
}
@media (max-width: 900px) {
  .pg-finishes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pg-finishes {
    grid-template-columns: 1fr;
  }
}

/* ── Trust badge row ───────────────────────────────────── */
.pg-trustbadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(32, 80, 160, 0.08);
  border: 1px solid rgba(32, 80, 160, 0.25);
  border-radius: 999px;
  font-size: 13px;
  color: var(--cc-fg);
  margin-top: 28px;
}
.pg-trustbadge svg {
  color: var(--cc-rating-gold, #c6a022);
}

/* ── Quote block (cases) ───────────────────────────────── */
.pg-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 12px;
}
.pg-quote {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 3px;
  padding: 36px 36px 30px;
  position: relative;
}
.pg-quote-mark {
  position: absolute;
  top: 12px;
  left: 24px;
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--cc-gold-200);
  user-select: none;
}
.pg-quote-body {
  font-family: var(--cc-font-serif-tc);
  font-weight: 500;
  font-size: var(--cc-fs-lead);
  line-height: 1.7;
  color: var(--cc-fg-strong);
  padding-left: 36px;
  text-wrap: pretty;
}
.pg-quote-attrib {
  padding-left: 36px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cc-border);
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-400);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.pg-quote-attrib b {
  color: var(--cc-fg);
  font-weight: 600;
  display: block;
  font-size: 13px;
}
@media (max-width: 720px) {
  .pg-quotes {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HOMEPAGE HERO - CSS-only carousel
   Redesigned homepage hero: scroll-snap carousel + trust bar.
   Rendered by the [cc_homepage_hero] shortcode (functions.php).
   Classes namespaced pt-hero-* / pt-trust-* to avoid colliding
   with the pre-existing cc-hero-* / cc-trust-* rules above,
   which style the current live hero and stay untouched.
   Custom properties (--cc-*) are already defined.
   ============================================================ */
.pt-hero {
  position: relative;
}
.pt-hero-stage {
  position: relative;
  height: clamp(420px, 56vw, 620px);
  overflow: hidden;
}

/* Snap-mode overrides: convert stage into a horizontal scroller */
.pt-hero.is-snap .pt-hero-stage {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pt-hero.is-snap .pt-hero-stage::-webkit-scrollbar {
  display: none;
}

/* Each slide becomes a flex item, full-width, snap-aligned */
.pt-hero.is-snap .pt-hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background-size: cover;
  background-position: center;
  opacity: 1;
}

/* Overlay sits absolute inside each slide */
.pt-hero.is-snap .pt-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pt-hero-overlay-left {
  background: none;
  /* Owner's mother, 2026-09-07: remove gradients from photos. */
}
.pt-hero-overlay-right {
  background: none;
  /* Owner's mother, 2026-09-07: remove gradients from photos. */
}

/* Slide content - left/right aligned within a 1200px container */
.pt-hero-content {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 9%;
  max-width: 600px;
  color: #fff;
}
.pt-hero-content-right {
  left: auto;
  right: 7%;
  text-align: right;
}
.pt-hero-content-right .pt-hero-sub {
  margin-left: auto;
}
.pt-hero-content-right .pt-hero-cta-row {
  justify-content: flex-end;
}

.pt-hero-eyebrow {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-gold-200);
  margin-bottom: 18px;
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pt-hero-eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--cc-gold-300);
  opacity: 0.7;
}
.pt-hero-content-right .pt-hero-eyebrow {
  flex-direction: row-reverse;
}
.pt-hero-title {
  font-family: var(--cc-font-serif-tc);
  font-size: var(--cc-fs-display);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 16px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  color: #fff;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.pt-hero-title-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.6);
  margin: -4px 0 18px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.pt-hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  letter-spacing: 0.03em;
  margin: 0 0 30px;
  max-width: 480px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.pt-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pt-hero-link {
  color: #fff;
  font-size: var(--cc-fs-control);
  font-weight: 500;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
  transition:
    opacity 180ms,
    color 180ms;
  padding: 8px 4px;
}
.pt-hero-link:hover {
  opacity: 1;
  color: var(--cc-gold-200);
}

/* Approved-clients mini-strip (slide 3) - small caps row of named-client wordmarks */
.pt-hero-clients {
  font-family: var(--cc-font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 26px;
  line-height: 1.7;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  max-width: 520px;
}
.pt-hero-clients-label {
  color: var(--cc-gold-200);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--cc-fs-micro);
  margin-right: 10px;
  opacity: 0.9;
}

/* Dots - absolute over carousel, anchor-link based.
   IMPORTANT: no `transition` on .pt-hero-dot. A Chromium invalidation path
   caches the transitioned style of the previously-active dot and the
   .is-active class toggle fails to repaint. Verified empirically. */
.pt-hero-dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.pt-hero-dot {
  display: block;
  width: 28px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.pt-hero-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}
.pt-hero-dot.is-active {
  background: var(--cc-accent-gold-bright); /* R17: active dot → real gold */
  width: 36px;
}

/* Slide counter - content via the [data-active] attribute on the hero */
.pt-hero-counter {
  position: absolute;
  bottom: 30px;
  right: 24px;
  font-family: var(--cc-font-display);
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  letter-spacing: 0.08em;
  z-index: 5;
  padding: 4px 8px;
  pointer-events: none;
}
.pt-hero[data-active="1"] .pt-hero-counter::before {
  content: "1";
}
.pt-hero[data-active="2"] .pt-hero-counter::before {
  content: "2";
}
.pt-hero[data-active="3"] .pt-hero-counter::before {
  content: "3";
}
.pt-hero-counter::before {
  content: "1";
} /* fallback if shim never runs */
.pt-hero-counter::after {
  content: " / 3";
  color: rgba(255, 255, 255, 0.4);
  margin-left: 1px;
}

@media (max-width: 720px) {
  .pt-hero-stage {
    height: 420px;
  }
  .pt-hero-content {
    left: 6%;
    right: 6%;
    bottom: 12%;
    max-width: none;
  }
  .pt-hero-content-right {
    left: 6%;
    right: 6%;
    text-align: left;
  }
  .pt-hero-content-right .pt-hero-sub {
    margin-left: 0;
  }
  .pt-hero-content-right .pt-hero-cta-row {
    justify-content: flex-start;
  }
  .pt-hero-content-right .pt-hero-eyebrow {
    flex-direction: row;
  }
  .pt-hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
  .pt-hero-sub {
    font-size: 14px;
    margin-bottom: 22px;
  }
  .pt-hero-counter {
    display: none;
  }
}

/* Trust bar - namespaced pt-trust-* (live cc-trust-* rules stay untouched) */
.pt-hero-trustbar {
  background: var(--cc-brand-bg);
  color: #fff;
}
.pt-trustbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pt-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.pt-trust-item a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.pt-trust-item strong {
  color: #fff;
  font-weight: 600;
}
.pt-trust-item .cc-icon {
  color: var(--cc-accent-gold-bright); /* R17: trust icon → real gold */
  flex-shrink: 0;
}
.pt-trust-item-en {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  margin-left: 4px;
}

@media (max-width: 900px) {
  .pt-trustbar-inner {
    gap: 16px 24px;
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .pt-trustbar-inner {
    padding: 14px 18px;
    gap: 12px 20px;
  }
  .pt-trust-item {
    font-size: 12px;
    gap: 8px;
  }
  .pt-trust-item-en {
    display: none;
  }
}

/* ============================================================
   SITE FOOTER - dark 4-col + procurement
   Rendered by [cc_site_footer]. Trusted-by strip + dark 4-col
   body + procurement strip + bottom legal. Reuses --cc-* tokens.
   ============================================================ */

/* ── TRUSTED-BY STRIP (cream - sits above the dark footer) ── */
.pt-trusted {
  background: var(--cc-surface-warm);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  padding: 36px 24px 38px;
}
.pt-trusted-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.pt-trusted-eyebrow {
  font-family: var(--cc-font-sans);
  font-weight: 700;
  font-size: var(--cc-fs-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cc-gold-600);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.pt-trusted-eyebrow::before,
.pt-trusted-eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--cc-gold-300);
}
.pt-trusted-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 32px;
  font-family: var(--cc-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--cc-fg);
  letter-spacing: 0.02em;
}
.pt-trusted-mark {
  position: relative;
  white-space: nowrap;
  transition: color 150ms;
}
.pt-trusted-mark:hover {
  color: var(--cc-fg-strong);
}
.pt-trusted-sep {
  width: 4px;
  height: 4px;
  background: var(--cc-gold-400);
  border-radius: 50%;
  opacity: 0.6;
}
.pt-trusted-note {
  /* 2026-06-17 owner: this line was unreadably small (micro 11px). Raise to
     body and darken so the "500+ orgs / gov text-only" disclaimer is legible. */
  font-size: var(--cc-fs-body);
  color: var(--cc-ink-600);
  font-style: italic;
  font-family: var(--cc-font-display);
  letter-spacing: 0.04em;
}
.pt-trusted-disclaimer {
  display: block;
  margin-top: 4px;
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-500);
  letter-spacing: 0.03em;
}
.pt-trusted-sep-gov {
  width: 4px;
  height: 4px;
  background: var(--cc-gold-400);
  border-radius: 50%;
  opacity: 0.6;
}
.pt-trusted-mark-gov {
  position: relative;
  white-space: nowrap;
  font-style: italic;
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--cc-fg);
  letter-spacing: 0.02em;
  transition: color 150ms;
}
.pt-trusted-mark-gov:hover {
  color: var(--cc-fg-strong);
}
/* Testimonials true ZH/EN swap (owner 2026-06-13: the Chinese version should
   carry as little English as possible). The site-wide cc_bi() lockup shows both
   halves on the ZH locale; here we want Chinese-only on ZH, English-only on EN.
   On ZH locale hide the EN half + the eyebrow separator; on EN locale the global
   `html[lang^="en"] .pt-bi-zh` rule already hides the ZH half, so just re-show EN. */
.pt-trusted .pt-bi-en,
.pt-trusted .pt-bi-sep {
  display: none;
}
html[lang^="en"] .pt-trusted .pt-bi-en,
html[lang^="en"] .pt-trusted .pt-bi-sep {
  display: inline;
}
@media (max-width: 900px) {
  .pt-trusted-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }
  .pt-trusted-list > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .pt-trusted-sep-gov {
    height: 4px;
  }
}
@media (max-width: 720px) {
  .pt-trusted-list {
    font-size: 18px;
    gap: 10px 22px;
  }
  .pt-trusted-sep:not(.pt-trusted-sep-gov) {
    display: none;
  }
  .pt-trusted-mark-gov {
    font-size: inherit;
  }
}

/* ── DARK FOOTER - main ── */
.pt-footer {
  background: var(--cc-brand-bg);
  color: rgba(255, 255, 255, 0.7);
  padding: 72px 0 0;
  font-family: var(--cc-font-sans);
}
.pt-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 56px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 52px;
}
@media (max-width: 900px) {
  .pt-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }
}
@media (max-width: 560px) {
  .pt-footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }
}

.pt-footer-col h4 {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* 2026-06-26 owner: match the homepage feature-block heading gold (.pt-feat-item b). */
  color: #e3c77f;
  margin: 0 0 22px;
  font-weight: 700;
  position: relative;
  padding-bottom: 12px;
}
.pt-footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.pt-footer-col h4 .pt-h4-en {
  display: block;
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
  text-transform: none;
  font-weight: 400;
}

.pt-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.pt-footer-list a,
.pt-footer-list span {
  font-size: var(--cc-fs-control);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  transition: color 150ms;
}
.pt-footer-list a:hover {
  color: var(--cc-gold-300);
}
.pt-footer-list .is-flagship a {
  color: #fff;
  font-weight: 600;
}
.pt-footer-list .is-flagship {
  white-space: normal;
}
/* 2026-06-09: removed the ::before gold dot + inline-flex - it indented
   "水晶獎座 Crystal Awards" out of line with the other catalogue links. */
.pt-footer-list .is-flagship a::before {
  content: none;
}
.pt-footer-list .is-flagship a:hover {
  color: var(--cc-gold-300);
}
.pt-footer-list .is-flagship .pt-flagship-tag {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  /* --cc-gold-400 was flipped to brand blue in the 2026-05-27 palette pass, so the tag
     went invisible on the blue footer. Use the real champagne gold so FLAGSHIP reads. */
  color: var(--cc-rating-gold);
  margin-left: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.pt-footer-list .is-quiet a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.pt-footer-list .is-quiet a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ── Brand column ── */
.pt-brand .pt-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.pt-brand-mark {
  width: 46px;
  height: 46px;
  /* 2026-06-09: was filter:brightness(0) invert(1) → flattened the blue PT mark
     into a featureless white blob on the dark footer ("logo is just pure white").
     Show the real coloured logo on a white chip so it keeps detail + contrast. */
  background: #fff;
  border-radius: 9px;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
}
.pt-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.pt-brand-zh {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h3);
  color: #fff;
  letter-spacing: 0.04em;
}
.pt-brand-en {
  font-family: var(--cc-font-display);
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 3px;
}
.pt-brand-tag {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 22px;
  max-width: 320px;
  text-wrap: pretty;
}
.pt-brand-tag .en {
  display: block;
  margin-top: 6px;
  font-family: var(--cc-font-display);
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}
.pt-brand-address {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--cc-gold-500);
  max-width: 320px;
  font-style: normal;
}
.pt-brand-address svg {
  color: var(--cc-gold-300);
  flex-shrink: 0;
  margin-top: 2px;
}
.pt-brand-address strong {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 13px;
}
.pt-brand-address .en {
  display: block;
  margin-top: 2px;
  font-family: var(--cc-font-display);
  /* Owner's father, 2026-08-31 「文字要正體不要斜」 and Howard, 2026-09-02 "no
     italics in the footer". The <address> element is italic by browser default,
     so the block itself is pinned upright as well, below. */
  font-style: normal;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.pt-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(32, 80, 160, 0.08);
  border: 1px solid rgba(32, 80, 160, 0.3);
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  transition: all 200ms;
  text-decoration: none;
}
.pt-google:hover,
.pt-google:focus-visible {
  /* Owner 2026-08-23: the rating pill went unreadable on hover. The hover state only ever
     restated the background, so whichever link rule the page loaded last was free to take
     the text with it. Every part of the pill is now given its colour explicitly, and the
     background lightens rather than deepening, so contrast rises on hover instead of falling. */
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff !important;
}
.pt-google:hover strong,
.pt-google:focus-visible strong {
  color: #fff !important;
}
.pt-google:hover .pt-google-stars,
.pt-google:focus-visible .pt-google-stars {
  color: var(--cc-gold-300, #e2c66b) !important;
}
.pt-google:hover .pt-google-arrow,
.pt-google:focus-visible .pt-google-arrow {
  color: rgba(255, 255, 255, 0.85) !important;
}
.pt-google-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--cc-rating-gold, #c6a022);
}
.pt-google-stars svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.pt-google strong {
  font-weight: 700;
  color: #fff;
}
.pt-google-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  margin-left: 2px;
}

/* ── Catalogue column ── */
.pt-cat-quiet-divider {
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  margin: 12px 0 8px;
}

/* ── Contact column ── */
.pt-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pt-contact-item svg {
  color: var(--cc-gold-300);
  flex-shrink: 0;
}
.pt-contact-hours {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}
.pt-contact-hours strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ── PROCUREMENT / PAYMENT STRIP ── */
.pt-procurement {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pt-procurement-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pt-procurement-label {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pt-procurement-label svg {
  color: rgba(255, 255, 255, 0.7);
}
.pt-procurement-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  flex: 1;
}
.pt-procurement-item {
  padding: 0 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.pt-procurement-item:last-child {
  border-right: 0;
}
.pt-procurement-item strong {
  color: #fff;
  font-weight: 600;
}
.pt-procurement-item-en {
  display: block;
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
  letter-spacing: 0.03em;
}
@media (max-width: 720px) {
  .pt-procurement-inner {
    gap: 14px;
  }
  .pt-procurement-list {
    gap: 4px 0;
  }
  .pt-procurement-item {
    padding: 4px 12px;
    border-right: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
  }
  .pt-procurement-item-en {
    display: none;
  }
}

/* ── BOTTOM LEGAL STRIP ── */
.pt-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}
.pt-bottom-copy strong {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}
.pt-bottom-legal {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
/* Owner 2026-08-23: the WhatsApp button sat on top of the domain and the legal links. It is
   fixed at right 22px and is 58px across, so the bar keeps that corner clear for it rather
   than letting the two share the space. */
.pt-bottom {
  padding-right: 104px;
}
@media (max-width: 560px) {
  .pt-bottom {
    padding-right: 24px;
    padding-bottom: 96px;
  }
}
.pt-bottom-legal a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 150ms;
}
.pt-bottom-legal a:hover {
  color: var(--cc-gold-300);
}
.pt-bottom-domain {
  font-family: var(--cc-font-display);
  font-style: italic;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}
@media (max-width: 560px) {
  .pt-bottom {
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Footer feature strip (2026-06-17 owner) - the 4 brand points relocated from the
   category-archive .cc-archfeat into the site footer so they show on every page.
   Footer-scoped (white-on-blue); does NOT reuse the cream .cc-archfeat styles. */
.pt-feat {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pt-feat-inner {
  /* 2026-06-17 owner: "extend to cover whole page" - span the full footer width
     on the site gutter frame, not a narrow 1200 centred band. */
  max-width: none;
  margin: 0;
  padding: 28px max(var(--cc-gutter), 24px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.pt-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
/* 2026-06-17 owner: blue-on-blue was an ugly contrast - use gold for the icon +
   label so the strip reads against the navy footer. NOTE: the --cc-gold-* tokens
   were repurposed to BLUE in the brand refresh (--cc-gold-300 is now #8aa6c4), so
   they CANNOT be used here - hardcode a real champagne gold. */
.pt-feat-item svg {
  flex: 0 0 26px;
  color: #e3c77f;
  margin-top: 2px;
}
.pt-feat-item b {
  display: block;
  font-family: var(--cc-font-serif-tc, serif);
  font-size: var(--cc-fs-body);
  font-weight: 700;
  color: #e3c77f;
  margin-bottom: 3px;
}
.pt-feat-sub {
  display: block;
  font-size: var(--cc-fs-small);
  line-height: 1.45;
  /* owner 2026-06-26: non-blue sub-text under 專屬設計·度身訂造 → champagne gold. */
  color: var(--cc-rating-gold);
}
@media (max-width: 900px) {
  .pt-feat-inner {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .pt-feat-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================
   PRODUCT DETAIL REDESIGN - crystal-flagship + photography-pending
   Appended for the single-product page redesign. All selectors are
   .pd-* namespaced - no clash with existing .cc-spec / .cc-pd-trust /
   .cc-customization-hints / .cc-btn rules above. Rendered by the
   cc_single_* / cc_after_* hooks in functions.php.
   ============================================================ */

/* ── Spec table (.pd-spec - richer than the legacy .cc-spec) ─────── */
.pd-spec {
  margin: 18px 0 24px;
  padding: 0;
  border-top: 1px solid var(--cc-border);
}
.pd-spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cc-border);
  align-items: start;
}
.pd-spec-row dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-fg);
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pd-spec-row dt span {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-300);
  letter-spacing: 0.02em;
  font-weight: 400;
}
.pd-spec-row dd {
  font-size: var(--cc-fs-body);
  color: var(--cc-fg);
  margin: 0;
  line-height: 1.6;
  font-family: var(--cc-font-sans);
}
.pd-spec-row dd b {
  color: var(--cc-fg-strong);
  font-weight: 600;
}
.pd-spec-row dd .meta-en {
  display: block;
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--cc-ink-300);
  margin-top: 2px;
}
.pd-spec-row.is-callout dd {
  background: rgba(32, 80, 160, 0.06);
  padding: 6px 10px;
  margin: -4px -10px;
  border-radius: 2px;
}
.pd-spec-row.is-callout dd b {
  color: var(--cc-gold-700);
}

/* ── Crystal colour-swatch row ──────────────────────────────────── */
.pd-colours {
  margin: 0 0 28px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--cc-border);
}
.pd-colours-label {
  font-size: var(--cc-fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-fg);
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-colours-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-300);
  letter-spacing: 0.02em;
  font-weight: 400;
  text-transform: none;
}
.pd-colours-count {
  font-family: var(--cc-font-display);
  font-style: italic;
  color: var(--cc-gold-500);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
  margin-left: auto;
}
.pd-colours-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-colour {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
  transition: transform 150ms var(--cc-ease-out);
}
.pd-colour:hover {
  transform: scale(1.1);
}
.pd-colour.is-active {
  outline: 2px solid var(--cc-gold-500);
  outline-offset: 2px;
}
.pd-colours-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--cc-ink-400);
  font-family: var(--cc-font-display);
  font-style: italic;
}

/* ── Procurement mini-strip ─────────────────────────────────────── */
.pd-procurement {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400);
  padding: 14px 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: 0.04em;
}
.pd-procurement-label {
  font-weight: 700;
  color: var(--cc-gold-600);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--cc-fs-micro);
}
.pd-procurement-divider {
  color: var(--cc-border-strong);
}
.pd-procurement-item {
  color: var(--cc-fg);
}

/* ── Photography-pending gallery placeholder ────────────────────── */
.pd-gallery-pending {
  width: 100%;
}
.pd-main.is-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    135deg,
    var(--cc-surface-cream),
    var(--cc-surface-warm)
  );
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.pd-main.is-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 18px,
    rgba(32, 80, 160, 0.04) 18px 19px
  );
}
.pd-placeholder-inner {
  position: relative;
  text-align: center;
  padding: 32px;
  max-width: 320px;
}
.pd-placeholder-zh {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h3);
  color: var(--cc-fg-strong);
  margin: 0 0 4px;
}
.pd-placeholder-label {
  font-family: var(--cc-font-display);
  font-style: italic;
  color: var(--cc-ink-500);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.pd-placeholder-note {
  font-size: 12px;
  color: var(--cc-ink-400);
  line-height: 1.6;
  padding-top: 18px;
  margin: 0;
  border-top: 1px solid var(--cc-border);
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.pd-thumb {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  background-color: var(--cc-surface-warm);
}
.pd-thumb.is-placeholder {
  background: var(--cc-surface-cream);
  position: relative;
  display: block;
}
.pd-thumb.is-placeholder.is-active {
  border-color: var(--cc-gold-500);
}

/* ── "Why Crystal" panel + capability stats (after summary) ─────── */
.pd-why-section {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 24px;
}
.pd-deep-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-fg-strong);
  margin: 0;
}
.pd-deep-eyebrow-sub {
  color: var(--cc-ink-300);
  margin-left: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.pd-deep-rule {
  width: 36px;
  height: 3px;
  background: var(--cc-gold-500);
  margin: 12px 0 22px;
  border: 0;
}
.pd-deep-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--cc-fg-strong);
  margin: 0 0 36px;
  line-height: 1.3;
}
/* 2026-05-28 hallmark pass: break the 3-up symmetric grid into a hero+secondary
 * asymmetric layout. First card = factory (the single proof point that matters
 * most to a B2B buyer choosing between trading agents and a real workshop).
 * Other two share the right column. Falls back to single column under 720px. */
.pd-why {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 20px 28px;
}
.pd-why-card {
  padding: 28px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: 3px;
}
.pd-why-card:first-child {
  grid-row: 1 / span 2;
  padding: 36px 36px 40px;
  background: linear-gradient(
    180deg,
    var(--cc-surface-warm) 0%,
    var(--cc-surface) 60%
  );
  border-left: 3px solid var(--cc-primary-500);
}
.pd-why-card:first-child .pd-why-title {
  font-size: var(--cc-fs-h2);
  letter-spacing: -0.01em;
}
.pd-why-card:first-child .pd-why-body {
  font-size: var(--cc-fs-body);
  line-height: 1.75;
}
@media (max-width: 720px) {
  .pd-why {
    grid-template-columns: 1fr;
  }
  .pd-why-card:first-child {
    grid-row: auto;
  }
}
.pd-why-num {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--cc-gold-500);
  letter-spacing: 0.14em;
}
.pd-why-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h3);
  color: var(--cc-fg-strong);
  margin: 8px 0 6px;
}
.pd-why-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--cc-ink-400);
  margin: 0 0 12px;
}
.pd-why-body {
  font-size: var(--cc-fs-body);
  color: var(--cc-ink-500);
  line-height: 1.7;
  margin: 0;
}
/* 2026-05-28 hallmark pass: stats hierarchy. First stat (Since 2010 - the
 * trust anchor) is the primary; remaining stats sit as secondary in a
 * 2-column right rail. Was a flex-wrap strip with all 5 stats at equal
 * weight, which read like a SaaS landing page. */
.pd-deep-stats {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.4fr);
  gap: 12px 48px;
  align-items: center;
  background: var(--cc-surface-warm);
  padding: 32px 36px;
  border-radius: 3px;
  margin-top: 28px;
  border-left: 3px solid var(--cc-primary-500);
}
.pd-deep-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pd-deep-stat:first-child {
  grid-row: 1 / span 2;
  align-self: stretch;
  justify-content: center;
  padding-right: 32px;
  border-right: 1px solid var(--cc-border-soft);
}
.pd-deep-stat:first-child .pd-deep-stat-num {
  font-size: clamp(48px, 6vw, 64px);
  color: var(--cc-primary-800);
  letter-spacing: -0.02em;
}
.pd-deep-stat:first-child .pd-deep-stat-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink-600);
}
.pd-deep-stat:not(:first-child) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cc-border-soft);
}
.pd-deep-stat:nth-child(2),
.pd-deep-stat:nth-child(3) {
  grid-column: 2;
}
.pd-deep-stat:nth-child(4),
.pd-deep-stat:nth-child(5) {
  grid-column: 2;
}
.pd-deep-stat-num {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--cc-fg-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pd-deep-stat-label {
  font-size: 13px;
  color: var(--cc-ink-600);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .pd-deep-stats {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }
  .pd-deep-stat:first-child {
    grid-row: auto;
    padding: 0 0 16px;
    border-right: none;
    border-bottom: 1px solid var(--cc-border-soft);
  }
  .pd-deep-stat:nth-child(2),
  .pd-deep-stat:nth-child(3),
  .pd-deep-stat:nth-child(4),
  .pd-deep-stat:nth-child(5) {
    grid-column: 1;
  }
}

@media (max-width: 900px) {
  .pd-why {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .pd-spec-row {
    grid-template-columns: 110px 1fr;
    gap: 12px;
  }
  .pd-why-section {
    margin-top: 48px;
  }
}

/* ============================================================
   SITE HEADER  (pt-hdr)
   Bespoke header rendered via [cc_site_header] inside the
   Theme Builder header template (post 40800). Pure-CSS toggles.
   ============================================================ */
.pt-hdr {
  background: #fff;
  border-bottom: 1px solid var(--cc-border);
  position: sticky;
  top: 0;
  z-index: 90;
  font-family: var(--cc-font-sans);
}
/* visually-hidden toggle checkboxes - label-for + :checked still work */
.pt-hdr-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.pt-hdr-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* logo lockup */
.pt-hdr-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 6px 0;
  /* Owner + his mother, 2026-09-07: "no underscore when hovering upon the logo".
     The lockup carried no text-decoration rule of its own, so the global anchor
     hover underlined the brand name. Suppressed on the anchor and on every span
     inside it, because the underline can be drawn by either. */
  text-decoration: none;
}
.pt-hdr-logo:hover,
.pt-hdr-logo:focus,
.pt-hdr-logo:focus-visible,
.pt-hdr-logo:hover .pt-hdr-logo-zh,
.pt-hdr-logo:hover .pt-hdr-logo-en,
.pt-hdr-logo:hover .pt-hdr-logo-text,
.pt-hdr-logo:focus .pt-hdr-logo-zh,
.pt-hdr-logo:focus .pt-hdr-logo-en,
.pt-hdr-logo:focus .pt-hdr-logo-text,
.pt-hdr-logo:focus-visible .pt-hdr-logo-zh,
.pt-hdr-logo:focus-visible .pt-hdr-logo-en,
.pt-hdr-logo:focus-visible .pt-hdr-logo-text {
  text-decoration: none;
  /* Owner's mother, 2026-09-07: suppress underline on focus and focus-visible states
     for all child spans, matching hover behavior. */
}
.pt-hdr-mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.pt-hdr-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
/* His father, 2026-08-30 14:48: 頂部第一横行按鈕文字 ... 所有文字按照現在加大
   4 point font size, then at 15:13 the same row 減小2 point. Net +2px on the
   original, which is what the sizes below carry.
   The English sub-labels ride the shared --cc-fs-micro token, so they are lifted
   with calc() rather than left behind the Chinese sitting above them. */
/* Owner's father, 2026-08-30. He listed the top row by name: 卓越獎品,
   PREMIER TROPHY, 首頁, 產品分類, 客戶案例, 指南, 關於我們, 訂購流程,
   查詢報價. At 14:48 「所有文字按照現在加大4 point font size」, then at 15:13
   「所有文字按照現在減小2 point font size」. Net +2 from the 30 Aug baseline,
   and only the second message survives on its own, so both are applied
   together rather than the later one alone. He writes sizes in points the
   way Word does and the sizes he has approved here shipped as px. */
/* Same rule as the nav labels below: a CJK string in a horizontal row measures
   one character wide unless it is told not to wrap, so 卓越獎品 breaks to
   卓越獎 / 品 the moment the row runs short. Every single-line label in the
   header chrome carries nowrap. Vertical lists (mega-menu tier 3, the mobile
   category list) deliberately do NOT, because a long category name there has
   to wrap somewhere. */
.pt-hdr-logo-zh {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: 20px;
  color: var(--cc-fg-strong);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.pt-hdr-logo-en {
  font-family: var(--cc-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--cc-ink-600);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

/* primary nav */
.pt-hdr-nav {
  display: flex;
  /* Fluid, because the desktop nav has to survive from 901px (the breakpoint
     below which it is replaced by the burger) up to a wide desktop. A fixed
     30px overflowed the row at the narrow end once the Chinese type went to
     18px, and the items broke mid-word. */
  gap: clamp(12px, 1.6vw, 30px);
  margin-left: 16px;
  flex: 1;
  align-items: center;
}
.pt-hdr-nav-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
  position: relative;
  flex: 0 0 auto;
  transition: color var(--cc-dur-base) ease;
}
/* Chinese has no spaces, so its min-content width is ONE CHARACTER: a flex row
   that runs short breaks 產品分類 into 產品分 / 類 rather than overflowing, and
   every item in the bar stacks into two lines. nowrap is what makes an item
   measure its whole string, and it is required on any CJK label that sits in a
   flex or grid track. This is the defect the 18px bump shipped on 2026-09-03. */
.pt-hdr-nav-zh {
  /* 18px is the size the owner asked for and it is what a real desktop gets:
     1.25vw reaches 18px at 1440 and holds there. Between the 1181px burger
     breakpoint and 1440 it scales down instead of overflowing the row. */
  font-size: clamp(15.5px, 1.25vw, 18px);
  font-weight: 600;
  color: var(--cc-primary-700);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pt-hdr-nav-en {
  font-size: calc(var(--cc-fs-micro) + 4px);
  font-weight: 600;
  color: var(--cc-primary-300);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Buy back the width the letter-spacing costs, in the band where it is tight. */
@media (max-width: 1439px) {
  .pt-hdr-nav-zh {
    letter-spacing: 0.01em;
  }
  .pt-hdr-nav-en {
    letter-spacing: 0.08em;
  }
}
/* 爸爸, 2026-09-11 12:10, circled the top right of /en/shop-en/ in green: GET A QUOTE was
   printed straight through the search icon, the basket count and the 繁 / EN pills.
   WHY IT COLLIDES ONLY IN ENGLISH. .pt-hdr-actions is flex-shrink:0 and every
   .pt-hdr-nav-item is flex:0 0 auto with nowrap, so when the labels are wider than the nav
   box they do not compress, they paint over the cluster. The English bar carries seven
   uppercase labels with letter-spacing, roughly 70 characters against the Chinese bar's 20,
   so only English overruns. Reproduced at 1280 wide before touching anything.
   The letters give the width back: 0.02em over ~70 characters at 14px is about 60px, which
   is the overlap measured. The nav also gets min-width:0 so it can never be wider than the
   space actually left for it. */
@media (min-width: 901px) and (max-width: 1365px) {
  html[lang^="en"] .pt-hdr-nav {
    min-width: 0;
    margin-left: 8px;
    gap: clamp(8px, 0.9vw, 14px);
  }
  html[lang^="en"] .pt-hdr-nav-en {
    letter-spacing: 0;
    font-size: var(--cc-fs-micro);
  }
  /* The first pass left GET A QUOTE still touching the search icon at 1280, so the
     cluster gives a little back too and the nav gets a hard right margin it cannot
     cross. Re-rendered at 1280 after each change rather than reasoning about it. */
  html[lang^="en"] .pt-hdr-nav {
    margin-right: 10px;
  }
  html[lang^="en"] .pt-hdr-actions {
    gap: 8px;
  }
  /* The last of the overlap at 1280 comes back from the frame, not from the type: the
     row padding and the logo lockup gap. Taking it there keeps every label at a readable
     size, which is the point of the bar. Verified by rendering 1100, 1280 and 1440. */
  html[lang^="en"] .pt-hdr-inner {
    padding-inline: 14px;
    gap: 12px;
  }
  html[lang^="en"] .pt-hdr-logo {
    gap: 8px;
  }
}
.pt-hdr-nav-item:hover .pt-hdr-nav-zh {
  color: var(--cc-primary-500);
}
.pt-hdr-nav-item:hover .pt-hdr-nav-en {
  color: var(--cc-primary-400);
}
.pt-hdr-nav-item.is-active .pt-hdr-nav-zh {
  color: var(--cc-primary-800);
}
.pt-hdr-nav-item.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 2px;
  background: var(--cc-primary-500);
}
.pt-hdr-nav-item.is-highlight .pt-hdr-nav-zh {
  color: var(--cc-primary-600);
}
.pt-hdr-nav-item.is-highlight:hover .pt-hdr-nav-zh {
  color: var(--cc-primary-700);
}

/* actions */
.pt-hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* 2026-06-26 owner: quote-basket in the header. Icon → /quote-basket (one click);
   CSS-hover preview panel stays open while the cursor is anywhere over the widget
   (panel sits flush under the icon - no gap that would auto-dismiss it). */
.pt-hdr-basket {
  position: relative;
  display: inline-flex;
}
.pt-hdr-basket-link {
  position: relative;
}
.pt-hdr-basket-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cc-rating-gold, #c6a022);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pt-hdr-basket-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0; /* flush - no gap so the hover bridge never breaks */
  padding-top: 10px;
  width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
  z-index: 1200;
}
.pt-hdr-basket:hover .pt-hdr-basket-panel,
.pt-hdr-basket:focus-within .pt-hdr-basket-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pt-hdr-basket-head {
  background: #fff;
  border: 1px solid var(--cc-border, rgba(64, 112, 144, 0.16));
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 14px 16px 8px;
  font-weight: 700;
  color: var(--cc-fg-strong, #1a1a1a);
  box-shadow: 0 18px 40px rgba(20, 40, 70, 0.16);
}
.pt-hdr-basket-body {
  background: #fff;
  border-inline: 1px solid var(--cc-border, rgba(64, 112, 144, 0.16));
  padding: 4px 16px 14px;
  color: #555;
  font-size: 13.5px;
  box-shadow: 0 18px 40px rgba(20, 40, 70, 0.16);
}
.pt-hdr-basket-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--cc-primary-500, #407090);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px rgba(20, 40, 70, 0.16);
  transition: background 0.2s ease;
}
.pt-hdr-basket-go:hover {
  background: var(--cc-primary-700, #2d566f);
}
.pt-hdr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-fg);
  border-radius: var(--cc-r-sm);
  cursor: pointer;
  transition:
    color var(--cc-dur-fast) ease,
    background var(--cc-dur-fast) ease;
}
.pt-hdr-icon-btn:hover {
  color: var(--cc-gold-600);
  background: var(--cc-surface-warm);
}
.pt-hdr-icon-btn svg {
  width: 19px;
  height: 19px;
}

.pt-hdr-lang {
  display: flex;
  gap: 5px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--cc-border);
}
.pt-hdr-lang-pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border: 1.5px solid var(--cc-logo-blue);
  border-radius: var(--cc-r-sm);
  color: var(--cc-logo-blue); /* 2026-06 contrast fix: blue on white */
  background: #fff;
  transition:
    color var(--cc-dur-fast) ease,
    background var(--cc-dur-fast) ease,
    border-color var(--cc-dur-fast) ease;
}
.pt-hdr-lang-pill,
.pt-hdr-lang-pill:link,
.pt-hdr-lang-pill:visited {
  color: var(--cc-logo-blue);
}
.pt-hdr-lang-pill:hover {
  color: #fff !important;
  background: var(--cc-logo-blue);
  border-color: var(--cc-logo-blue);
}
.pt-hdr-lang-pill.is-active {
  color: #fff !important;
  background: var(--cc-logo-blue);
  border-color: var(--cc-logo-blue);
}

.pt-hdr-menu-toggle {
  display: none;
}
.pt-hdr-ico-close {
  display: none;
}

/* search drawer */
.pt-hdr-searchbar {
  display: none;
  border-top: 1px solid var(--cc-border);
  background: #fff;
}
#pt-hdr-search:checked ~ .pt-hdr-searchbar {
  display: block;
}
.pt-hdr-search-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pt-hdr-search-inner > svg {
  width: 18px;
  height: 18px;
  color: var(--cc-ink-300);
  flex-shrink: 0;
}
.pt-hdr-search-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--cc-fs-control);
  font-family: inherit;
  color: var(--cc-fg-strong);
  padding: 8px 0;
}
.pt-hdr-search-input::placeholder {
  color: var(--cc-ink-300);
}

/* mobile drawer */
.pt-hdr-mobile {
  display: none;
  border-top: 1px solid var(--cc-border);
  background: #fff;
  padding: 8px 24px 18px;
}
#pt-hdr-menu:checked ~ .pt-hdr-mobile {
  display: block;
}
.pt-hdr-mobile .pt-hdr-nav-item {
  padding: 13px 2px;
  border-bottom: 1px solid var(--cc-border-soft);
}
.pt-hdr-mobile .pt-hdr-nav-item.is-active::after {
  display: none;
}
.pt-hdr-mobile .pt-hdr-nav-item.is-active {
  background: var(--cc-surface-warm);
}
.pt-hdr-mobile .pt-hdr-lang {
  border-left: 0;
  padding-left: 2px;
  margin-left: 0;
  margin-top: 16px;
}
#pt-hdr-menu:checked ~ .pt-hdr-bar .pt-hdr-ico-menu {
  display: none;
}
#pt-hdr-menu:checked ~ .pt-hdr-bar .pt-hdr-ico-close {
  display: inline;
}

/* The burger takes over below 1180px, raised from 900px on 2026-09-03.
   Measured, not guessed: with the Chinese nav at 18px the header row
   (.pt-hdr-inner) overflowed its container by 241px at 901, 142px at 1024,
   81px at 1100 and 23px at 1200, and was clean at 1280. A row that overflows
   is the same defect as a row that wraps, just failing in the other
   direction, so showing a full nav below the width it needs was never right.
   scripts/seo/frontend_parse.py measures this; re-run it if these numbers
   are ever changed. */
@media (max-width: 1180px) {
  .pt-hdr-nav {
    display: none;
  }
  .pt-hdr-menu-toggle {
    display: inline-flex;
  }
  .pt-hdr-actions > .pt-hdr-lang {
    display: none;
  }
  .pt-hdr-inner {
    gap: 12px;
  }
}
@media (min-width: 1181px) {
  .pt-hdr-mobile {
    display: none !important;
  }
}

/* ============================================================
   PER-TAG ARCHIVE  (auto-injects on /tag/<slug>/ product_tag archives)
   ============================================================ */
.cc-tag-archive {
  background: var(--cc-surface-warm);
  padding: 48px 24px 36px;
  border-bottom: 1px solid var(--cc-border-soft);
  margin-bottom: 32px;
}
.cc-tag-archive-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.cc-tag-breadcrumb {
  font-size: 12px;
  color: var(--cc-ink-500);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.cc-tag-breadcrumb a {
  color: var(--cc-ink-600);
  text-decoration: none;
}
.cc-tag-breadcrumb a:hover {
  color: var(--cc-primary-600);
}
.cc-tag-archive-eyebrow {
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-primary-500);
  margin-bottom: 8px;
}
.cc-tag-archive-title {
  font-family: var(--cc-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cc-fg-strong);
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}
.cc-tag-archive-title-secondary {
  font-family: var(--cc-font-serif-tc, var(--cc-font-display));
  font-size: var(--cc-fs-lead);
  font-weight: 400;
  color: var(--cc-ink-500);
}
.cc-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.cc-tag-chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cc-border-soft);
  font-size: 13px;
  color: var(--cc-fg);
  text-decoration: none;
  transition: all var(--cc-dur-fast) ease;
}
.cc-tag-chip:hover {
  border-color: var(--cc-primary-500);
  color: var(--cc-primary-700);
}
.cc-tag-chip.is-current {
  background: var(--cc-primary-500);
  color: #fff;
  border-color: var(--cc-primary-500);
  font-weight: 600;
}
.cc-tag-chip.is-current:hover {
  background: var(--cc-primary-700);
}

/* Editorial variants per tag group */
.cc-tag-archive-kicker {
  margin: -6px 0 18px;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-ink-600);
  font-family: var(--cc-font-display);
  font-style: italic;
}

/* Bestseller variant - gold-touched per brand law §6 */
.cc-tag-archive--bestseller {
  background: linear-gradient(135deg, var(--cc-surface-warm) 0%, #f5ecd8 100%);
  border-top: 3px solid var(--cc-rating-gold-500, #b8960c);
}
.cc-tag-archive--bestseller .cc-tag-archive-eyebrow {
  color: var(--cc-rating-gold-500, #b8960c);
}
.cc-tag-bestseller-chip {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cc-rating-gold-500, #b8960c);
  color: #fff;
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* Use-case variant - context-photo placeholder */
.cc-tag-archive--use {
  background: var(--cc-primary-50);
  border-top: 3px solid var(--cc-primary-500);
}

/* Shape variant - geometric outline */
.cc-tag-archive--shape {
  background: #fff;
  border-top: 1px solid var(--cc-border-soft);
  position: relative;
}
.cc-tag-shape-outline {
  position: absolute;
  right: 36px;
  top: 36px;
  width: 120px;
  height: 120px;
  color: var(--cc-primary-300);
  opacity: 0.9;
}
.cc-tag-shape-outline svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 700px) {
  .cc-tag-shape-outline {
    display: none;
  }
}

/* Default variant inherits from base .cc-tag-archive */

/* ============================================================
   LEGAL PAGE TEMPLATE  ([cc_legal_page which=privacy|terms|payment])
   220px sticky TOC + 720px parallel-language content column.
   ============================================================ */
.cc-legal-page {
  padding: 56px 24px 80px;
  background: #fff;
}
.cc-legal-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
  align-items: start;
}
.cc-legal-toc {
  position: sticky;
  top: 96px;
  padding: 20px 0;
  border-right: 1px solid var(--cc-border-soft);
}
.cc-legal-toc-head {
  margin-bottom: 18px;
  padding-right: 20px;
}
.cc-legal-toc-head .cc-eyebrow {
  display: block;
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-primary-500);
  margin-bottom: 4px;
}
.cc-legal-toc-title {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-h3);
  font-weight: 600;
  color: var(--cc-fg-strong);
}
.cc-legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc-legal-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  margin-right: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cc-ink-600);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition:
    background var(--cc-dur-fast) ease,
    color var(--cc-dur-fast) ease,
    border-color var(--cc-dur-fast) ease;
}
.cc-legal-toc-list a:hover {
  color: var(--cc-primary-700);
  background: var(--cc-surface-warm);
}
.cc-legal-toc-list a.is-current {
  color: var(--cc-primary-700);
  border-left-color: var(--cc-primary-500);
  background: var(--cc-surface-warm);
  font-weight: 600;
}
.cc-legal-toc-num {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.cc-legal-content {
  max-width: 720px;
}
.cc-legal-header {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--cc-border-soft);
  margin-bottom: 36px;
}
.cc-legal-header .cc-eyebrow {
  display: block;
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-primary-500);
  margin-bottom: 8px;
}
.cc-legal-title {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cc-fg-strong);
  margin: 0 0 6px;
}
.cc-legal-secondary-title {
  display: block;
  font-size: var(--cc-fs-lead);
  color: var(--cc-ink-500);
  font-family: var(--cc-font-serif-tc, var(--cc-font-display));
  margin-bottom: 18px;
}
.cc-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  color: var(--cc-ink-500);
  letter-spacing: 0.04em;
}
.cc-legal-meta strong {
  color: var(--cc-fg);
  font-weight: 600;
}

.cc-legal-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--cc-border-soft);
  scroll-margin-top: 96px;
}
.cc-legal-section:last-child {
  border-bottom: 0;
}
.cc-legal-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-h2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cc-fg-strong);
  margin: 0 0 14px;
}
.cc-legal-section-num {
  font-size: 13px;
  color: var(--cc-primary-500);
  letter-spacing: 0.12em;
  font-weight: 600;
}
.cc-legal-section-secondary {
  font-family: var(--cc-font-serif-tc, var(--cc-font-display));
  font-size: 15px;
  font-weight: 400;
  color: var(--cc-ink-500);
  letter-spacing: 0;
}
.cc-legal-section-body {
  font-size: var(--cc-fs-body);
  line-height: 1.75;
  color: var(--cc-fg);
  margin: 0 0 10px;
}
.cc-legal-section-secondary-body {
  color: var(--cc-ink-500);
  font-size: var(--cc-fs-body);
  border-left: 2px solid var(--cc-border-soft);
  padding-left: 14px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .cc-legal-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cc-legal-toc {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--cc-border-soft);
    padding-bottom: 18px;
  }
  .cc-legal-toc-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .cc-legal-toc-list a {
    padding: 6px 10px;
  }
  .cc-legal-title {
    font-size: var(--cc-fs-h1);
  }
}

/* ============================================================
   CRYSTAL COLLECTION LANDING  (override hero for /product-category/crystal-trophy/)
   Dark blue editorial hero + trio cards + spec strip + 10-colour band + closer.
   Ported from Claude Design 2026-05-27 CrystalCollectionLanding.jsx.
   ============================================================ */
.cc-crystal-landing {
  margin: 0 0 40px;
  background: var(--cc-surface-warm, #f9f7f4);
}
.cc-crystal-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--cc-primary-900) 0%,
    var(--cc-primary-700) 50%,
    var(--cc-primary-500) 100%
  );
  color: #fff;
  padding: 88px 24px 96px;
  border-bottom: 1px solid var(--cc-teal-900, #1f3a47);
}
.cc-crystal-hero-overlay {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 80% 30%,
      rgba(168, 197, 205, 0.18) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 18% 78%,
      rgba(32, 80, 160, 0.25) 0%,
      transparent 55%
    );
  pointer-events: none;
}
.cc-crystal-hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cc-crystal-hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-teal-300, #a8c5cd);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  /* Owner's mother, 2026-09-07: text-shadow maintains eyebrow readability over photograph. */
}
.cc-crystal-hero-title {
  font-family: var(--cc-font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* Owner's mother, 2026-09-07: text-shadow maintains headline readability over photograph. */
}
.cc-crystal-hero-sub {
  font-size: var(--cc-fs-lead);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 680px;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  /* Owner's mother, 2026-09-07: text-shadow maintains sub-headline readability over photograph. */
}
.cc-crystal-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cc-btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 14px;
  text-decoration: none;
  transition:
    background var(--cc-dur-fast) ease,
    border-color var(--cc-dur-fast) ease;
}
.cc-btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  color: #fff;
}
.cc-btn-large {
  padding: 14px 26px;
  font-size: var(--cc-fs-control);
}

.cc-crystal-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 1240px;
  margin: 0 auto;
  border-bottom: 1px solid var(--cc-border-soft);
}
.cc-crystal-trio-card {
  padding: 36px 28px;
  background: #fff;
  border-left: 1px solid var(--cc-border-soft);
}
.cc-crystal-trio-card:first-child {
  border-left: 0;
}
.cc-crystal-trio-no {
  display: inline-block;
  font-family: var(--cc-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--cc-primary-500);
  margin-bottom: 14px;
}
.cc-crystal-trio-card h3 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-h3);
  line-height: 1.3;
  color: var(--cc-fg-strong);
  margin: 0 0 10px;
  font-weight: 600;
}
.cc-crystal-trio-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--cc-ink-600);
  margin: 0;
}
@media (max-width: 900px) {
  .cc-crystal-trio {
    grid-template-columns: 1fr;
  }
  .cc-crystal-trio-card {
    border-left: 0;
    border-top: 1px solid var(--cc-border-soft);
  }
  .cc-crystal-trio-card:first-child {
    border-top: 0;
  }
}

.cc-crystal-spec-strip {
  background: var(--cc-ink-900, #14181f);
  color: #fff;
  padding: 40px 24px;
}
.cc-crystal-spec-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}
.cc-crystal-spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-crystal-spec-val {
  font-family: var(--cc-font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  color: var(--cc-teal-300);
}
.cc-crystal-spec-lbl {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 760px) {
  .cc-crystal-spec-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Editorial colour strip - wide horizontal grid, large square swatches,
 * named labels below in tracked small caps. Replaces prior pill-ribbon. */
.cc-crystal-swatches {
  background: #fff;
  padding: 64px 24px 56px;
  border-top: 1px solid var(--cc-border-soft);
  border-bottom: 1px solid var(--cc-border-soft);
  text-align: center;
}
.cc-crystal-swatches-eyebrow {
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-primary-500);
  margin-bottom: 6px;
}
.cc-crystal-swatches-title {
  font-family: var(--cc-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--cc-fg-strong);
  margin: 0 0 28px;
}
.cc-crystal-swatch-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto;
}
.cc-crystal-swatch-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cc-crystal-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  display: block;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.04);
}
.cc-crystal-swatch-name {
  font-family: var(--cc-font-sans);
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cc-ink-600);
  line-height: 1;
}
.cc-crystal-swatch-label {
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cc-ink-500);
  font-style: italic;
  font-family: var(--cc-font-display);
}
@media (max-width: 900px) {
  .cc-crystal-swatch-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
}
@media (max-width: 520px) {
  .cc-crystal-swatch-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .cc-crystal-swatch-name {
    font-size: var(--cc-fs-micro);
    letter-spacing: 0.02em;
  }
}

/* ============================================================
   FLOATING WHATSAPP / QUOTE PROMPT  (always-on conversion surface)
   ============================================================ */
.pt-floater {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--cc-font-en, Inter, sans-serif);
}
.pt-floater-btn {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  box-shadow:
    0 10px 28px -10px rgba(37, 211, 102, 0.55),
    0 4px 12px -6px rgba(20, 22, 28, 0.35);
  transition:
    transform var(--cc-dur-fast) ease,
    box-shadow var(--cc-dur-fast) ease;
}
.pt-floater-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px rgba(37, 211, 102, 0.65);
}
.pt-floater-btn svg {
  width: 26px;
  height: 26px;
}
.pt-floater-bubble {
  width: min(320px, calc(100vw - 44px));
  background: #fff;
  border: 1px solid var(--cc-border-soft);
  border-radius: 14px;
  box-shadow: 0 24px 56px -22px rgba(20, 22, 28, 0.35);
  padding: 18px 18px 16px;
  position: relative;
  animation: ptFloatIn 0.25s ease-out;
}
@keyframes ptFloatIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pt-floater-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--cc-ink-400);
  cursor: pointer;
  border-radius: 999px;
}
.pt-floater-close:hover {
  color: var(--cc-fg-strong);
  background: var(--cc-surface-warm);
}
.pt-floater-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cc-fg-strong);
  letter-spacing: 0.01em;
}
.pt-floater-body {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cc-ink-600);
}
.pt-floater-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-floater-wa,
.pt-floater-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition:
    background var(--cc-dur-fast) ease,
    color var(--cc-dur-fast) ease;
}
.pt-floater-wa {
  background: #25d366;
  color: #fff;
}
.pt-floater-wa:hover {
  background: #1ebe5b;
  color: #fff;
}
.pt-floater-wa svg {
  width: 16px;
  height: 16px;
}
.pt-floater-tel {
  background: var(--cc-surface-warm);
  color: var(--cc-fg-strong);
  border: 1px solid var(--cc-border-soft);
}
.pt-floater-tel:hover {
  background: var(--cc-ink-900);
  color: #fff;
}
@media (max-width: 540px) {
  .pt-floater {
    right: 14px;
    bottom: 14px;
  }
  .pt-floater-btn {
    width: 52px;
    height: 52px;
  }
  .pt-floater-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* ============================================================
   RECENTLY VIEWED  (`[cc_recently_viewed]` - hydrates from localStorage)
   Horizontal scroll on small viewports, 6-col grid on desktop.
   Hidden by default - JS unhides when localStorage has entries.
   ============================================================ */
.cc-recently-viewed {
  background: #fff;
  border-top: 1px solid var(--cc-border-soft);
  padding: 28px 0 32px;
}
.cc-recently-viewed-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.cc-recently-viewed-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.cc-recently-viewed-head h2 {
  margin: 0;
  font-family: var(--cc-font-display, var(--cc-font-zh-serif));
  font-size: var(--cc-fs-h3);
  font-weight: 600;
  color: var(--cc-fg-strong);
}
.cc-recently-viewed-head p {
  margin: 0;
  font-size: 12px;
  color: var(--cc-ink-500);
}
.cc-recently-viewed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.cc-recently-viewed-list a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  transition: opacity var(--cc-dur-fast) ease;
}
.cc-recently-viewed-list a:hover {
  opacity: 0.85;
}
.cc-recently-viewed-list img,
.cc-rv-thumb-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--cc-r-sm, 3px);
  background: var(--cc-surface-warm);
}
.cc-rv-name {
  font-size: var(--cc-fs-micro);
  color: var(--cc-fg);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .cc-recently-viewed-list {
    grid-template-columns: repeat(6, 60vw / 3);
    grid-auto-flow: column;
    grid-auto-columns: 40vw;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cc-recently-viewed-list > li {
    scroll-snap-align: start;
  }
}
@media (max-width: 520px) {
  .cc-recently-viewed-list {
    grid-auto-columns: 55vw;
  }
}

/* ============================================================
   FOOTER SEO LINK-EQUITY ISLAND  (`[cc_recommended_products_island]`)
   30 flagship products linked by name - Yoast Premium text-link counter
   parses these as internal links, reducing orphan-content count.
   ============================================================ */
.pt-recommends {
  background: var(--cc-surface-warm);
  border-top: 1px solid var(--cc-border-soft);
  padding: 36px 0 28px;
  font-family: var(--cc-font-en, Inter, sans-serif);
}
.pt-recommends-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.pt-recommends-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.pt-recommends-head h2 {
  margin: 0;
  font-family: var(--cc-font-display, var(--cc-font-zh-serif));
  font-size: var(--cc-fs-h3);
  font-weight: 600;
  color: var(--cc-fg-strong);
  letter-spacing: 0.02em;
}
.pt-recommends-head p {
  margin: 0;
  font-size: 13px;
  color: var(--cc-ink-500);
}
.pt-recommends-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 24px;
  font-size: 12px;
}
.pt-recommends-list a {
  color: var(--cc-ink-600);
  text-decoration: none;
  line-height: 1.65;
  transition: color var(--cc-dur-fast) ease;
}
.pt-recommends-list a:hover {
  color: var(--cc-gold-600);
}
.pt-recommends-all {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cc-gold-600);
  text-decoration: none;
}
.pt-recommends-all:hover {
  color: var(--cc-gold-700);
}
.pt-recommends--cat .pt-recommends-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
}
@media (max-width: 760px) {
  .pt-recommends-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .pt-recommends-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HEADER UTILITY STRIP  - slim contact bar above the main nav
   ============================================================ */
.pt-hdr-utility {
  background: var(--cc-brand-bg); /* 2026-06 top bar → logo blue */
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pt-hdr-utility-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pt-hdr-utility-list {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pt-hdr-utility-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color var(--cc-dur-fast) ease;
}
.pt-hdr-utility-list a:hover {
  color: var(--cc-gold-300, #e3c97a);
}
.pt-hdr-utility-list svg {
  width: 13px;
  height: 13px;
  opacity: 0.8;
}
.pt-hdr-utility-list strong {
  font-weight: 600;
  color: #fff;
}
.pt-hdr-utility-label {
  color: rgba(255, 255, 255, 0.6);
  margin-right: 2px;
  white-space: nowrap;
}
.pt-hdr-utility-hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.6);
}
.pt-hdr-utility-hours svg {
  width: 13px;
  height: 13px;
  opacity: 0.65;
}
@media (max-width: 760px) {
  .pt-hdr-utility-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 24px;
  }
  .pt-hdr-utility-list {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .pt-hdr-utility-label {
    display: none;
  }
}

/* ============================================================
   MEGA MENU  - 產品分類 dropdown driven by cc_megamenu_columns()
   ============================================================ */
/* has-mega item - pad-right so caret floats inline without growing the item's
 * flex column. Caret is absolutely positioned so it never affects the nav
 * item's overall height or baseline (fixes horizontal-alignment bug). */
.pt-hdr-nav-item.has-mega {
  position: relative;
  padding-right: 18px;
}
.pt-hdr-nav-caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  opacity: 0.55;
  color: var(--cc-primary-600);
  transition:
    transform var(--cc-dur-fast) ease,
    opacity var(--cc-dur-fast) ease;
  pointer-events: none;
}
/* 2026-05-28: caret rotation now driven by [data-mega-open="true"] state, not hover. */

.pt-hdr-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--cc-border-soft);
  box-shadow: 0 18px 40px -22px rgba(20, 22, 28, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity var(--cc-dur-base) ease,
    transform var(--cc-dur-base) ease,
    visibility 0s linear var(--cc-dur-base);
  z-index: 50;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 2026-05-28: click-only - opens via [data-mega-open="true"] toggled by inline JS.
 * Hover-open removed (user reported the mega popped when mouse merely passed near). */
.pt-hdr-bar[data-mega-open="true"] .pt-hdr-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--cc-dur-base) ease,
    transform var(--cc-dur-base) ease,
    visibility 0s;
}
.pt-hdr-bar[data-mega-open="true"] .pt-hdr-nav-item.has-mega .pt-hdr-nav-caret {
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
}
.pt-hdr-mega-inner {
  /* 2026-06-17: widened so the 3-col elegant card grid has generous photos. */
  max-width: min(1480px, 94vw);
  margin: 0 auto;
  padding: 28px 24px 24px;
}

/* ── Layered drilldown layout (replaces flat 10-column grid) ───────── */
.pt-hdr-mega-layout {
  display: grid;
  /* 2026-06-18 owner: narrower left rail (was 290px) so the right cards get more room. */
  grid-template-columns: 220px 1fr;
  gap: 0;
  /* 2026-06-17: mega is a catalogue drawer that extends down the viewport. 3-col
     elegant cards (matches the owner's mockups); the panel scrolls past this if a
     category has many subcats. */
  min-height: min(900px, calc(100vh - 160px));
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-r-md, 6px);
  overflow: hidden;
  background: #fff;
}

/* ── Tier 2 - left rail (parent categories) ───────────────────────── */
.pt-hdr-tier2 {
  background: var(--cc-surface-warm);
  border-right: 1px solid var(--cc-border-soft);
  padding: 14px 0;
}
.pt-hdr-tier2-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pt-hdr-tier2-item {
  margin: 0;
}
/* 2026-06-26 owner: the "view all" + "get a quote" actions live at the BOTTOM of the
   left category rail (moved out of the old footer bar). 查看全部產品 opens an
   all-categories overview panel; 查詢報價 is a filled CTA → /quote-basket. */
.pt-hdr-tier2-item--allcats {
  margin-top: 8px;
  border-top: 1px solid var(--cc-border, rgba(64, 112, 144, 0.16));
  padding-top: 4px;
}
.pt-hdr-tier2-item--allcats .pt-hdr-tier2-zh {
  font-weight: 700;
}
.pt-hdr-tier2-item--cta {
  padding: 8px 14px 12px 18px;
}
.pt-hdr-tier2-cta {
  justify-content: space-between;
  background: var(--cc-primary-500, #407090) !important;
  color: #fff !important;
  border-left: 0 !important;
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pt-hdr-tier2-cta:hover,
.pt-hdr-tier2-cta:focus-visible {
  background: var(--cc-primary-700, #2d566f) !important;
  color: #fff !important;
}
.pt-hdr-tier2-cta .pt-hdr-tier2-zh {
  color: #fff !important;
}
.pt-hdr-tier2-cta .pt-arr {
  font-size: 1.05em;
}
.pt-hdr-tier2-link {
  display: flex;
  align-items: center;
  padding: 12px 16px 12px 20px;
  gap: 10px;
  color: var(--cc-primary-700);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition:
    background var(--cc-dur-fast) ease,
    color var(--cc-dur-fast) ease,
    border-color var(--cc-dur-fast) ease;
  position: relative;
  white-space: nowrap;
}
.pt-hdr-tier2-link > div {
  min-width: 0;
  flex: 1;
}
.pt-hdr-tier2-link:hover,
.pt-hdr-tier2-link:focus-visible,
.pt-hdr-tier2-item.is-default-open .pt-hdr-tier2-link {
  background: #fff;
  color: var(--cc-primary-800);
  border-left-color: var(--cc-primary-500);
  outline: none;
}
.pt-hdr-tier2-zh {
  font-family: var(--cc-font-display, var(--cc-font-zh-serif));
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: block;
  color: inherit;
  white-space: nowrap;
}
.pt-hdr-tier2-en {
  font-size: calc(var(--cc-fs-micro) + 2px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-primary-400);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
}
.pt-hdr-tier2-arrow {
  width: 12px;
  height: 12px;
  margin-left: auto;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--cc-dur-fast) ease,
    transform var(--cc-dur-fast) ease;
}
.pt-hdr-tier2-link:hover .pt-hdr-tier2-arrow,
.pt-hdr-tier2-link:focus-visible .pt-hdr-tier2-arrow,
.pt-hdr-tier2-item.is-default-open .pt-hdr-tier2-arrow {
  opacity: 1;
  transform: translateX(0);
}
.pt-hdr-tier2-flagship {
  font-size: var(--cc-fs-micro);
  color: var(--cc-primary-500);
  margin-left: 4px;
}

/* ── Tier 3 - right panel (subcats + thumbs) ──────────────────────── */
.pt-hdr-tier3 {
  position: relative;
  padding: 22px 26px 24px;
  min-height: min(900px, calc(100vh - 160px));
}
.pt-hdr-tier3-panel {
  position: absolute;
  inset: 22px 26px 24px 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--cc-dur-fast) ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 2026-05-28: panel selection driven by JS .is-current class, NOT :has(:hover).
 * The prior :has() fallback reverted to the default Crystal Awards panel
 * whenever the cursor briefly left both tier-2 and tier-3 hover regions (e.g.
 * while moving from tier-2 row to the right-side panel content). JS now
 * holds sticky state - once a tier-2 row is hovered, its panel stays current
 * until another tier-2 row is hovered.
 *
 * 2026-05-29 CRITICAL FIX: `.is-current` was unscoped, so the tier-3 panel
 * marked .is-current (Crystal Awards default) reset child visibility to
 * `visible` + pointer-events `auto` even when the parent .pt-hdr-mega had
 * visibility:hidden. CSS visibility cascades parent→child only when child
 * doesn't set its own; child override wins. Pointer-events doesn't cascade
 * the same way. Result: an INVISIBLE but CLICKABLE list of tier-3 anchors
 * (?s=圓形水晶獎座&post_type=product, etc.) was overlaying the page body
 * area, intercepting clicks on PDP chips → navigating to those searches.
 * Scope .is-current rules to data-mega-open="true" ancestor only. */
.pt-hdr-bar[data-mega-open="true"] .pt-hdr-tier3-panel.is-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pt-hdr-bar[data-mega-open="true"] .pt-hdr-tier2-link.is-current,
.pt-hdr-bar[data-mega-open="true"]
  .pt-hdr-tier2-item.is-default-open
  .pt-hdr-tier2-link {
  background: #fff;
  color: var(--cc-primary-800);
  border-left-color: var(--cc-primary-500);
  outline: none;
}
.pt-hdr-bar[data-mega-open="true"]
  .pt-hdr-tier2-link.is-current
  .pt-hdr-tier2-arrow {
  opacity: 1;
  transform: translateX(0);
}

.pt-hdr-tier3-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cc-border-soft);
}
.pt-hdr-tier3-headlink {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pt-hdr-tier3-zh {
  font-family: var(--cc-font-display, var(--cc-font-zh-serif));
  font-size: 18px;
  font-weight: 600;
  color: var(--cc-primary-700);
  letter-spacing: 0.02em;
}
.pt-hdr-tier3-en {
  font-size: var(--cc-fs-micro);
  font-weight: 500;
  color: var(--cc-primary-400);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pt-hdr-tier3-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  columns: 2;
  column-gap: 24px;
}
.pt-hdr-tier3-list li {
  margin: 0 0 6px;
  break-inside: avoid;
}
.pt-hdr-tier3-list a {
  display: inline-block;
  font-size: 13px;
  color: var(--cc-primary-700);
  text-decoration: none;
  line-height: 1.5;
  transition: color var(--cc-dur-fast) ease;
}
.pt-hdr-tier3-list a:hover {
  color: var(--cc-primary-600);
}
.pt-hdr-tier3-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--cc-border-soft);
}
.pt-hdr-tier3-thumb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  transition: opacity var(--cc-dur-fast) ease;
}
.pt-hdr-tier3-thumb:hover {
  opacity: 0.85;
}
.pt-hdr-tier3-thumb img,
.pt-hdr-tier3-thumb-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  border-radius: var(--cc-r-sm, 3px);
  background: var(--cc-surface-warm);
  padding: 4px;
  border: 1px solid var(--cc-border-soft);
}
.pt-hdr-tier3-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-teal-300, #a8c5cd);
}
.pt-hdr-tier3-thumb-fallback svg {
  width: 56%;
  height: 56%;
}
.pt-hdr-tier3-thumb-name {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-600);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-hdr-tier3-seeall {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-primary-600);
  letter-spacing: 0.03em;
}
.pt-hdr-tier3-seeall:hover {
  color: var(--cc-primary-700);
}

/* 2026-06-17 mega-menu format revamp - subcats as photo cards (same language
   as the archive use-cards), replacing the tier3 text list + loose thumbs. */
.pt-hdr-tier3-rule {
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--cc-logo-blue, #1f4d61);
}
.pt-hdr-tier3-cards {
  display: grid;
  /* 2026-06-17 owner: photos must stay SQUARE, shrink the whole card (no crop),
     no scroll / 1-2 max. 4 columns => smaller cards => 8 fit in 2 rows. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 6px;
}
/* The mega reuses the archive .cc-usecard look (see .cc-usecard block). These
   tweaks keep the type/padding proportionate inside the dropdown. */
.pt-hdr-usecard .cc-usecard-zh {
  font-size: 15px;
}
.pt-hdr-usecard .cc-usecard-ds {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
  /* keep cards short - clamp the blurb to 1 line in the dropdown */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-hdr-usecard .cc-usecard-tx {
  padding: 11px 12px 12px;
}
/* 2026-06-17 owner ask: square photo, "zoom out... shrink the whole size not
   crop". Keep the 1:1 frame (square thumbnail) but CONTAIN the product so the
   whole piece shows smaller/centred instead of being cropped to fill. */
.pt-hdr-usecard .cc-usecard-media {
  aspect-ratio: 1 / 1;
}
.pt-hdr-usecard .cc-usecard-media img {
  object-fit: contain;
  padding: 6px;
}
.pt-hdr-usecard .cc-usecard-rule {
  margin-bottom: 8px;
}
.pt-hdr-usecard .cc-usecard-en {
  margin-bottom: 6px;
}
.pt-hdr-subcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  /* 2026-06-17 owner: blue border on every subcat card. */
  border: 1px solid var(--cc-logo-blue, #407090);
  border-radius: var(--cc-r-md, 8px);
  overflow: hidden;
  transition:
    box-shadow var(--cc-dur-fast, 0.18s) ease,
    transform var(--cc-dur-fast, 0.18s) ease,
    border-color var(--cc-dur-fast, 0.18s) ease;
}
.pt-hdr-subcard:hover {
  border-color: var(--cc-primary-300, #9cc0cf);
  box-shadow: 0 6px 18px rgba(31, 77, 97, 0.1);
  transform: translateY(-2px);
}
.pt-hdr-subcard-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cc-surface-warm, #f7f5f1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pt-hdr-subcard-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}
.pt-hdr-subcard-ph svg {
  width: 42px;
  height: 42px;
  color: var(--cc-primary-300, #9cc0cf);
  opacity: 0.6;
}
.pt-hdr-subcard-tx {
  padding: 9px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pt-hdr-subcard-zh {
  font-family: var(--cc-font-display, var(--cc-font-zh-serif));
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-primary-800, #1f4d61);
  line-height: 1.3;
}
.pt-hdr-subcard-en {
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-primary-400, #6c97a8);
}

.pt-hdr-mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--cc-surface-warm);
  border-radius: var(--cc-r-md, 8px);
}
.pt-hdr-mega-foot-text {
  font-size: 13px;
  color: var(--cc-fg);
}
.pt-hdr-mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cc-primary-500);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background var(--cc-dur-fast) ease;
}
.pt-hdr-mega-cta:hover {
  background: var(--cc-primary-700);
  color: #fff;
}

/* mobile-only collapsible variant */
.pt-hdr-mobile-mega {
  display: none;
}
.pt-hdr-mobile .pt-hdr-mobile-mega {
  display: block;
  margin: 6px 0 18px;
}
.pt-hdr-mobile-cat {
  border-bottom: 1px solid var(--cc-border-soft);
  padding: 4px 0;
}
.pt-hdr-mobile-cat summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
}
.pt-hdr-mobile-cat summary::-webkit-details-marker {
  display: none;
}
.pt-hdr-mobile-cat-zh {
  font-size: 15px;
  font-weight: 600;
  color: var(--cc-fg-strong);
}
.pt-hdr-mobile-cat-en {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 8px;
  flex: 1;
}
.pt-hdr-mobile-cat-caret {
  width: 14px;
  height: 14px;
  opacity: 0.55;
  transition: transform var(--cc-dur-fast) ease;
}
.pt-hdr-mobile-cat[open] .pt-hdr-mobile-cat-caret {
  transform: rotate(180deg);
}
.pt-hdr-mobile-cat-list {
  list-style: none;
  padding: 4px 0 10px 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-hdr-mobile-cat-list a {
  font-size: 13px;
  color: var(--cc-fg);
}
.pt-hdr-mobile-cat-all a {
  font-weight: 600;
  color: var(--cc-primary-600);
}
.pt-hdr-mobile-cat-count {
  display: inline-block;
  padding: 1px 7px;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-500);
  background: var(--cc-surface-warm);
  border-radius: 999px;
  margin-left: 6px;
}
.pt-hdr-mobile-cat[open] .pt-hdr-mobile-cat-count {
  background: var(--cc-primary-50);
  color: var(--cc-primary-700);
}
.pt-hdr-mobile-cat-seeall a {
  display: block;
  padding: 10px 0;
  font-weight: 600;
  color: var(--cc-primary-600);
  border-top: 1px dashed var(--cc-border-soft);
  margin-top: 4px;
}
.pt-hdr-mobile-cat-seeall a:hover {
  color: var(--cc-primary-700);
}

@media (max-width: 1100px) {
  .pt-hdr-mega-layout {
    grid-template-columns: 200px 1fr;
    min-height: 480px;
  }
  .pt-hdr-tier3 {
    min-height: 480px;
  }
  .pt-hdr-tier3-list {
    columns: 2;
  }
}
@media (max-width: 900px) {
  .pt-hdr-mega {
    display: none;
  }
}

/* ============================================================
   HOMEPAGE BLOCKS  (pt-featured / pt-svc / pt-cta)
   ============================================================ */
.pt-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-eyebrow-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-fg-strong);
}
.pt-eyebrow-rule {
  width: 28px;
  height: 1px;
  background: var(--cc-ink-300);
}
.pt-arr {
  font-family: var(--cc-font-display);
  display: inline-block;
}

/* featured-products band */
.pt-featured {
  background: #fff;
  padding: 72px 0 80px;
}
.pt-featured-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.pt-featured-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 32px;
}
.pt-featured-viewall {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color var(--cc-dur-fast) ease;
}
.pt-featured-viewall:hover {
  color: var(--cc-gold-600);
}

/* WooCommerce [products] grid → design ProductCard (scoped to the band) */
.pt-featured-grid ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pt-featured-grid ul.products::before,
.pt-featured-grid ul.products::after {
  content: none;
  display: none;
}
.pt-featured-grid ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  overflow: hidden;
  padding: 0 0 14px;
  transition:
    box-shadow var(--cc-dur-base) ease,
    transform var(--cc-dur-base) ease;
}
.pt-featured-grid ul.products li.product:hover {
  box-shadow: var(--cc-shadow-card-hover);
  transform: translateY(-2px);
}
.pt-featured-grid ul.products li.product img {
  border-radius: 0;
  margin: 0 0 12px;
}
.pt-featured-grid ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-fg-strong);
  padding: 0 14px;
  line-height: 1.4;
}
.pt-featured-grid ul.products li.product .price,
.pt-featured-grid ul.products li.product .button,
.pt-featured-grid ul.products li.product .added_to_cart {
  display: none;
}
@media (max-width: 1000px) {
  .pt-featured-grid ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .pt-featured-grid ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* service strip */
.pt-svc {
  background: var(--cc-surface-warm);
  padding: 60px 0;
}
.pt-svc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.pt-svc-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-svc-ico {
  width: 46px;
  height: 46px;
  border-radius: var(--cc-r-md);
  background: #fff;
  border: 1px solid var(--cc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-gold-500);
}
.pt-svc-ico svg {
  width: 22px;
  height: 22px;
}
.pt-svc-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cc-fg-strong);
  margin: 0;
}
.pt-svc-desc {
  font-size: 14px;
  color: var(--cc-ink-500);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 760px) {
  .pt-svc-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* dark CTA band */
.pt-cta {
  background: var(--cc-brand-bg);
  padding: 72px 24px;
}
.pt-cta-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.pt-cta-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-gold-300);
  margin-bottom: 16px;
}
.pt-cta-title {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 16px;
}
.pt-cta-body {
  font-size: var(--cc-fs-body);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0 auto 28px;
  max-width: 520px;
}
.pt-cta-btn,
.pt-qf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cc-gold-500);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 14px;
  padding: 13px 28px;
  border: 0;
  border-radius: var(--cc-r-xs);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--cc-dur-base) ease,
    transform var(--cc-dur-fast) ease;
}
.pt-cta-btn:hover,
.pt-qf-btn:hover {
  background: var(--cc-gold-700);
  transform: translateY(-1px);
  color: #fff;
}

/* ============================================================
   QUOTE FORM  (pt-qf)
   ============================================================ */
.pt-qf-section {
  background: var(--cc-surface-tint);
  padding: 56px 0 80px;
}
.pt-qf-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .pt-qf-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.pt-qf-h1 {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--cc-fg-strong);
  margin: 18px 0 0;
  line-height: 1.3;
}
.pt-qf-lead {
  font-size: var(--cc-fs-lead);
  color: var(--cc-ink-600);
  line-height: 1.8;
  margin: 14px 0 0;
}
.pt-qf-bullets {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pt-qf-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cc-fg);
}
.pt-qf-bullets svg {
  width: 15px;
  height: 15px;
  color: var(--cc-gold-500);
  flex-shrink: 0;
}

.pt-qf-form {
  position: relative;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--cc-shadow-1);
}
.pt-qf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .pt-qf-row {
    grid-template-columns: 1fr;
  }
}
.pt-qf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-qf-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-fg);
  letter-spacing: 0.02em;
}
.pt-qf-req {
  color: var(--cc-gold-600);
}
.pt-qf-form input[type="text"],
.pt-qf-form input[type="email"],
.pt-qf-form input[type="number"],
.pt-qf-form input[type="date"],
.pt-qf-form textarea {
  width: 100%;
  border: 1px solid var(--cc-border-input);
  border-radius: var(--cc-r-sm);
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--cc-fg-strong);
  background: #fff;
  transition:
    border-color var(--cc-dur-base) ease,
    box-shadow var(--cc-dur-base) ease;
}
.pt-qf-form input:focus,
.pt-qf-form textarea:focus {
  outline: none;
  border-color: var(--cc-gold-500);
  box-shadow: var(--cc-focus);
}
.pt-qf-form textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.6;
}
.pt-qf-radios {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pt-qf-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-r-sm);
  font-size: 13px;
  color: var(--cc-ink-600);
  cursor: pointer;
  transition:
    border-color var(--cc-dur-base) ease,
    color var(--cc-dur-base) ease,
    background var(--cc-dur-base) ease;
}
.pt-qf-radio:hover {
  border-color: var(--cc-gold-500);
  color: var(--cc-gold-600);
}
.pt-qf-radio input {
  accent-color: var(--cc-gold-500);
  margin: 0;
}
.pt-qf-radio:has(input:checked) {
  border-color: var(--cc-gold-500);
  color: var(--cc-gold-700);
  background: var(--cc-gold-50);
  font-weight: 600;
}
.pt-qf-files-note {
  font-size: 13px;
  color: var(--cc-ink-500);
  line-height: 1.6;
  margin: 0;
  padding: 12px 14px;
  background: var(--cc-surface-warm);
  border: 1px dashed var(--cc-border-strong);
  border-radius: var(--cc-r-sm);
}
.pt-qf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pt-qf-error {
  font-size: 13px;
  color: var(--cc-danger);
  background: #fdf2f1;
  border: 1px solid #f3d4d1;
  border-radius: var(--cc-r-sm);
  padding: 10px 13px;
}
.pt-qf-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pt-qf-btn-lg {
  padding: 14px 30px;
  font-size: 15px;
}
.pt-qf-small {
  font-size: var(--cc-fs-small);
  color: var(--cc-ink-400);
}

/* quote form - post-submit success state */
.pt-qf-success {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 24px;
}
.pt-qf-success-mark {
  width: 62px;
  height: 62px;
  border-radius: var(--cc-r-pill);
  background: var(--cc-gold-50);
  color: var(--cc-gold-600);
  border: 1px solid var(--cc-gold-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.pt-qf-success-mark svg {
  width: 28px;
  height: 28px;
}
.pt-qf-success-title {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--cc-fg-strong);
  margin: 0 0 12px;
}
.pt-qf-success-body {
  font-size: var(--cc-fs-body);
  color: var(--cc-ink-600);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto 26px;
}
.pt-qf-success-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.pt-qf-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cc-fg);
  transition: color var(--cc-dur-fast) ease;
}
.pt-qf-wa:hover {
  color: var(--cc-gold-600);
}
.pt-qf-wa svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   WOOCOMMERCE SHOP + CATEGORY ARCHIVE - design pass
   Styles the default WooCommerce category grid (/shop/) and
   product archives (/product-category/*/
) to the design system.
   ============================================================ */
.woocommerce-products-header {
  background: var(--cc-surface-warm);
  border-bottom: 1px solid var(--cc-border);
  padding: 42px 24px 38px;
  margin: 0 0 8px;
  text-align: center;
}
.woocommerce-products-header__title,
.woocommerce-products-header__title.page-title {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  color: var(--cc-fg-strong);
  margin: 0;
  letter-spacing: 0.04em;
}
.woocommerce-products-header__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--cc-gold-500);
  margin: 14px auto 0;
}
.woocommerce .term-description {
  text-align: center;
  max-width: 640px;
  margin: 14px auto 0;
  color: var(--cc-ink-500);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 2026-06-25 owner: "center all" on the shop/category header - a gutter rule was
   overriding the centered header to text-align:start. Force-center the title, its
   accent rule and the intro. */
.woocommerce.post-type-archive-product .woocommerce-products-header,
.woocommerce.post-type-archive-product .woocommerce-products-header__title,
.woocommerce.post-type-archive-product
  .woocommerce-products-header__title.page-title,
.woocommerce.post-type-archive-product .term-description,
body.post-type-archive-product .woocommerce-products-header,
body.post-type-archive-product .woocommerce-products-header__title {
  text-align: center !important;
}
/* 2026-06-25 owner: uniform thumbnail positioning across EVERY card - category
   cards must match the product cards (block 8119): `contain` so nothing crops,
   neutral fill hides any letterbox. Category `<li>` carries both .product-category
   and .product, so its 2-class selector outranked the product-card rule and
   computed to cover (cropping). Set it to the same contain+fill box. */
.woocommerce ul.products li.product-category.product a img,
.woocommerce ul.products li.product-category.product img,
.woocommerce ul.products li.product-category a img,
.woocommerce ul.products li.product-category img {
  object-fit: contain !important;
  aspect-ratio: 1 / 1;
  background: #f7f5f1;
  padding: 10px;
  box-sizing: border-box;
}
/* 2026-06-25 owner: drop the redundant "首頁 » Shop" breadcrumb on the shop root -
   it sat left-aligned above the now-centered 產品分類 title. Kept on deep pages/PDPs. */
body.post-type-archive-product .woocommerce-breadcrumb,
body.post-type-archive-product .breadcrumb-trail,
body.post-type-archive-product .woo-breadcrumbs {
  display: none !important;
}

/* 2026-07-16: breadcrumb row shares the same left frame as the archive title
   and product grid, so the 首页 » 分類 » 子分類 row no longer floats inward. */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce .breadcrumb-trail,
body.woocommerce .woo-breadcrumbs,
body.single-product .breadcrumb-trail,
body.single-product .woo-breadcrumbs {
  width: 100%;
  max-width: var(--cc-page-max);
  margin-inline: auto !important;
  padding-inline: max(var(--cc-gutter), 16px);
  box-sizing: border-box;
}
body.woocommerce .cc-arch-main > .woo-breadcrumbs,
body.woocommerce .cc-arch-main > .breadcrumb-trail {
  width: auto;
  max-width: none;
  margin: 0 0 1rem !important;
  padding-inline: 0;
}

/* product + category card grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
  margin: 32px 0 56px;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  overflow: hidden;
  padding: 0 0 16px;
  text-align: center;
  transition:
    box-shadow var(--cc-dur-base) ease,
    transform var(--cc-dur-base) ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover {
  box-shadow: var(--cc-shadow-card-hover);
  transform: translateY(-3px);
}
.woocommerce ul.products li img {
  margin: 0 0 14px !important;
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f7f5f1;
  display: block;
}
.woocommerce ul.products li .woocommerce-loop-product__title,
.woocommerce ul.products li .woocommerce-loop-category__title {
  font-size: var(--cc-fs-body) !important;
  font-weight: 600;
  color: var(--cc-fg-strong);
  padding: 0 14px !important;
  margin: 0;
  line-height: 1.4;
}
/* retire the unstyled yellow count badge → quiet tracked caps */
.woocommerce ul.products li.product-category mark.count,
.woocommerce ul.products li.product-category .count {
  display: block;
  background: transparent !important;
  color: var(--cc-ink-300) !important;
  font-family: var(--cc-font-sans);
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 5px;
  padding: 0;
}
/* catalogue mode - hide price + native add-to-cart, keep the bespoke enquiry CTA */
.woocommerce ul.products li.product .price {
  display: none;
}
.woocommerce ul.products li.product a.button:not(.cc-enquiry-btn),
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
  display: none !important;
}

@media (max-width: 1000px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 680px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 2026-07-15 TEST category contrast and CTA separation only. */
body.term-test-batch .cc-catrail-zh {
  color: #1f4d61 !important;
}
body.term-test-batch .cc-catrail-en,
body.term-test-batch .cc-catrail-count {
  color: #555555 !important;
}
body.term-test-batch .cc-catrail-sub,
body.term-test-batch .cc-catrail-all {
  color: #2f6379 !important;
}
body.term-test-batch .cc-catrail-sub.is-active,
body.term-test-batch .cc-catrail-sub.is-active .cc-catrail-count {
  color: #ffffff !important;
}
body.term-test-batch.woocommerce ul.products li.product .cc-atq,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-atq {
  display: block;
  width: calc(100% - 24px) !important;
  min-height: 48px;
  margin: 12px !important;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 10px;
  background: #407090 !important;
  color: #ffffff !important;
  line-height: 1.2;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
body.term-test-batch.woocommerce ul.products li.product .cc-atq:hover,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-atq:hover {
  background: #2f6379 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ============================================================
   SEARCH RESULTS  (body.search-results)
   Hello Elementor's search loop emits generic <article class="post">
   stacked single-column with oversized images. Grid-ify into the same
   card treatment as the shop/archive.
   ============================================================ */
body.search-results .site-main {
  background: var(--cc-surface-warm);
  padding: 32px 0 64px;
}
body.search-results .page-content {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) {
  body.search-results .page-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  body.search-results .page-content {
    grid-template-columns: 1fr;
  }
}

body.search-results .page-content::before {
  content: "搜尋結果 · Search Results";
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-fg-strong);
  padding: 6px 0 10px;
  border-bottom: 3px solid var(--cc-gold-500);
  margin-bottom: 16px;
  width: max-content;
}

body.search-results article.post {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  overflow: hidden;
  padding: 0 0 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--cc-dur-base) ease,
    transform var(--cc-dur-base) ease;
}
body.search-results article.post:hover {
  box-shadow: var(--cc-shadow-card-hover);
  transform: translateY(-2px);
}
body.search-results article.post > a:first-of-type,
body.search-results article.post .post-thumbnail {
  display: block;
  margin: 0 0 12px;
  overflow: hidden;
}
body.search-results article.post img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform var(--cc-dur-base) ease;
}
body.search-results article.post:hover img {
  transform: none;
}
body.search-results article.post .entry-title {
  font-size: var(--cc-fs-body);
  font-weight: 600;
  color: var(--cc-fg-strong);
  margin: 0 14px 6px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
body.search-results article.post .entry-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--cc-dur-fast) ease;
}
body.search-results article.post .entry-title a:hover {
  color: var(--cc-gold-600);
}
body.search-results article.post p,
body.search-results article.post .entry-summary {
  font-size: 13px;
  color: var(--cc-ink-500);
  line-height: 1.6;
  margin: 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.search-results article.post .entry-meta,
body.search-results article.post .post-categories,
body.search-results article.post .edit-link {
  display: none;
}

/* no-results state */
body.search-no-results .site-main {
  background: var(--cc-surface-warm);
  padding: 64px 24px;
  text-align: center;
}

/* 2026-07-16: guide archive. The current /blog/ page is a raw vertical list;
   give it the same editorial rhythm as the rest of the site without changing
   the post content or requiring a page-builder rebuild. */
body.blog .site-main,
body.archive .site-main {
  background: var(--cc-surface-warm);
  padding: 56px max(24px, var(--cc-gutter)) 84px;
}
body.blog .page-content,
body.archive .page-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--cc-page-max);
  margin: 0 auto;
}
body.blog .page-content::before,
body.archive .page-content::before {
  content: "指南 · BLOG";
  grid-column: 1 / -1;
  display: block;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cc-border-soft);
  color: var(--cc-primary-600);
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
}
body.blog article.post,
body.archive article.post {
  min-height: 190px;
  padding: 28px 30px 26px;
  background: #fff;
  border: 1px solid var(--cc-border-soft);
  border-top: 3px solid var(--cc-primary-500);
  border-radius: var(--cc-r-lg);
  box-shadow: var(--cc-shadow-card, 0 12px 30px rgba(30, 50, 60, 0.06));
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
body.blog article.post:hover,
body.archive article.post:hover {
  transform: translateY(-3px);
  border-color: var(--cc-primary-300, #aac4d0);
  box-shadow: var(--cc-shadow-card-hover, 0 18px 38px rgba(30, 50, 60, 0.12));
}
body.blog article.post .entry-title,
body.archive article.post .entry-title {
  margin: 0 0 16px;
  font-family: var(--cc-font-serif-tc, var(--cc-font-display));
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
}
body.blog article.post .entry-title a,
body.archive article.post .entry-title a {
  color: var(--cc-ink-900, #17252b);
  text-decoration: none;
}
body.blog article.post .entry-title a:hover,
body.archive article.post .entry-title a:hover {
  color: var(--cc-primary-600);
}
body.blog article.post p,
body.archive article.post p {
  margin: 0;
  color: var(--cc-ink-500, #68757b);
  font-size: var(--cc-fs-body);
  line-height: 1.75;
}
body.blog .pagination,
body.archive .pagination {
  max-width: var(--cc-page-max);
  margin: 32px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--cc-border-soft);
  text-align: right;
}
body.blog .pagination a,
body.archive .pagination a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--cc-primary-600);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 720px) {
  body.blog .site-main,
  body.archive .site-main {
    padding-inline: 16px;
  }
  body.blog .page-content,
  body.archive .page-content {
    grid-template-columns: 1fr;
  }
  body.blog .page-content::before,
  body.archive .page-content::before {
    grid-column: 1;
  }
}
body.search-no-results .page-content {
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--cc-fs-body);
  color: var(--cc-ink-600);
  line-height: 1.7;
}
body.search-no-results .page-title {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--cc-fg-strong);
  margin: 0 0 12px;
}

/* ============================================================
   SHOP - bigger category cards (3-col on desktop)
   The 4-col grid felt cramped; widen the cards on the shop archive
   only (category archives stay at 4-col for a denser listing).
   ============================================================ */
body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
body.woocommerce-shop ul.products li img,
body.post-type-archive-product ul.products li img {
  height: auto;
  aspect-ratio: 4 / 3;
}
@media (max-width: 900px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   PRODUCT-DETAIL  size chip  (.cc-pd-size)
   Renders between the short description and the enquiry CTA.
   ============================================================ */
.cc-pd-size {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 4px 0 0;
}
.cc-pd-size-label {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-ink-400);
}
.cc-pd-size-value {
  font-family: var(--cc-font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--cc-fg-strong);
  letter-spacing: 0.04em;
}

/* ============================================================
   CATEGORY ARCHIVE - "瀏覽其他分類" tail section for sparse archives
   ============================================================ */
.cc-archive-more {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--cc-border);
}
.cc-archive-more .pt-eyebrow {
  margin-bottom: 28px;
}
.cc-archive-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .cc-archive-more-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .cc-archive-more-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   QUOTE FORM - tailored product preview card  (.pt-qf-product-card)
   Renders at the top of the intro column when ?cc_pid=<id> is set,
   so the buyer sees exactly which product they're about to enquire on.
   ============================================================ */
.pt-qf-product-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-left: 3px solid var(--cc-gold-500);
  border-radius: var(--cc-r-lg);
  margin: 0 0 22px;
  box-shadow: var(--cc-shadow-1);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--cc-dur-base) ease,
    transform var(--cc-dur-fast) ease;
}
.pt-qf-product-card:hover {
  box-shadow: var(--cc-shadow-2);
  transform: translateY(-1px);
}
.pt-qf-product-img {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: var(--cc-r-md);
  overflow: hidden;
  background: var(--cc-surface-warm);
}
.pt-qf-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pt-qf-product-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pt-qf-product-cat {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-ink-400);
}
.pt-qf-product-name {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-body);
  color: var(--cc-fg-strong);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.pt-qf-product-size {
  margin-top: 4px;
  font-family: var(--cc-font-display);
  font-size: 13px;
  color: var(--cc-gold-700);
  letter-spacing: 0.04em;
}

.pt-qf-product-extras {
  margin: 0 0 22px;
}
.pt-qf-product-extras-label {
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-ink-400);
  margin-bottom: 8px;
}
.pt-qf-product-extras-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pt-qf-product-extra {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cc-fg);
  background: var(--cc-surface-warm);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-pill);
  letter-spacing: 0.02em;
}

/* ============================================================
   hide SKU + stock - on-demand B2B, no public inventory exposure
   ============================================================ */
.product_meta .sku_wrapper,
.woocommerce .product .sku_wrapper,
.woocommerce .product .stock,
.woocommerce-product-details__short-description + .stock,
.woocommerce-Price-amount.amount,
.woocommerce ul.products li.product .price {
  display: none !important;
}

/* ============================================================
   2026-05-28 layout pass - 4cm side gutters + 10pt min body font
   + safety against narrow-column collapse on PDP why-section.
   ============================================================ */
:root {
  /* R52: --cc-gutter removed here; single source at bottom of file */
  --cc-page-max: min(1618px, calc(100vw - (2 * var(--cc-gutter))));
}
/* Expand the major content containers to honour 4cm gutters on wide screens
 * while keeping mobile padding sensible (16px floor). */
.pt-hdr-utility-inner,
.pt-hdr-inner,
.pt-hdr-mega-inner,
.pg-section-inner,
.pg-hero-inner,
.pt-trustbar-inner,
.cc-recently-viewed-inner,
.pt-recommends-inner,
.pd-why-section,
.cc-tag-archive-inner {
  max-width: var(--cc-page-max);
  padding-inline: max(var(--cc-gutter), 16px);
  box-sizing: border-box;
}
/* PDP why-section safety: even if Elementor wraps it inside the flex/grid
 * gallery+summary row, force it to break to its own row at full width. */
.pd-why-section {
  width: 100%;
  clear: both;
  display: block;
  grid-column: 1 / -1;
  flex-basis: 100%;
  margin-top: 64px;
}

/* 2026-05-28 hallmark pass: monospace register for SKU codes + bank-account
 * numbers + part numbers. The trophy industry runs on alphanumeric SKUs
 * (OT207, CB001, KA006) and proportional-font rendering of those looks
 * generic. Tabular numerals + ligature-free mono pulls them into "spec sheet"
 * territory which matches the maker's-catalogue voice the audit wants. */
.cc-sku,
.cc-mono,
.product_meta .sku,
.woocommerce-product-attributes-item__value code,
.pt-bank-account,
.pt-pay-bank-num,
.pt-spec-num {
  font-family:
    ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas,
    "Roboto Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "ss01" 1;
  letter-spacing: -0.005em;
}

/* 2026-05-28 hallmark pass: order-process payment + bank panel.
 * Replaces the prior 7-tile "glossary" with a real conversion-moment block:
 * left = oversized bank account with copy button (the single highest-intent
 * surface on the site), right = payment methods grid. */
.pt-pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: start;
}
.pt-pay-bank {
  padding: 36px 40px 38px;
  background: var(--cc-surface-warm);
  border: 1px solid var(--cc-border-soft);
  border-left: 3px solid var(--cc-primary-500);
  border-radius: 3px;
}
/* FPS acceptance badge beside the identifier. Typographic, not a copy of
   HKICL's registered artwork: see the note in part-04.php. */
.pt-pay-fps-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-inline-start: 8px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: #0f7b6c;
  vertical-align: middle;
  line-height: 1.25;
}
.pt-pay-fps-badge-en {
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.06em;
}
.pt-pay-fps-badge-zh {
  font-size: 0.66em;
}

/* Subcategory rail on product-category archives. */
.cc-subnav {
  margin: 6px 0 26px;
}
.cc-subnav-head {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--cc-logo-blue, #407090);
}
.cc-subnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-subnav-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid #e2ddd3;
  border-radius: 999px;
  background: #fff;
  color: #2b3138;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
}
.cc-subnav-item:hover {
  border-color: var(--cc-logo-blue, #407090);
}
.cc-subnav-item.is-current {
  border-color: var(--cc-logo-blue, #407090);
  background: var(--cc-logo-blue, #407090);
  color: #fff;
}
.cc-subnav-n {
  font-size: 12px;
  opacity: 0.62;
}

.pt-pay-bank-name {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: var(--cc-fs-h2);
  color: var(--cc-fg-strong);
  margin: 14px 0 18px;
}
.pt-pay-bank-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pt-pay-bank-label {
  font-size: var(--cc-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-ink-400);
}
.pt-pay-bank-num {
  /* His father, 2026-08-30 15:01, listing HSBC 香港上海滙豐銀行, the account
     number, the FPS id and both company names: 以下文字 font size 要更改細小50%.
     Halved from clamp(28,4.2vw,42). */
  font-size: clamp(14px, 2.1vw, 21px);
  font-weight: 500;
  color: var(--cc-primary-800);
  line-height: 1;
}
.pt-pay-copy {
  /* Owner's father, 2026-08-31: 「按鈕掣尺寸減小一半，文字font size 要更改為14point,
     文字要正體不要斜體」. Padding halved from 7px/14px. He writes sizes in points
     the way Word does, and the 12 he approved last week shipped as 12px, so 14
     here follows the same scale he has been looking at. font-style is pinned
     because the label was inheriting an italic further up the cascade. */
  display: inline-flex;
  align-items: center;
  gap: 3px;
  /* 2026-08-31 12:22, his latest word on this button: 「綠色圈位置內複製按鈕掣
     尺寸縮小30%, 文字font size 要加大2point, 文字要正體不要斜體」. The 30% is
     applied to the button. The font is NOT: he asked 14 point then +2, the
     owner chose font 6 on 2026-09-03 knowing that, and the owner's call
     stands. Upright is already pinned below. */
  padding: 3px 5px;
  font-size: 6pt; /* owner 2026-09-03: font 6, over his 14+2 */
  font-style: normal;
  font-weight: 600;
  color: var(--cc-primary-700);
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background var(--cc-dur-fast) ease,
    border-color var(--cc-dur-fast) ease,
    color var(--cc-dur-fast) ease;
}
.pt-pay-copy:hover {
  border-color: var(--cc-primary-400);
  color: var(--cc-primary-800);
}
.pt-pay-copy.is-flashed {
  background: var(--cc-primary-600);
  border-color: var(--cc-primary-600);
  color: #fff;
}
.pt-pay-copy-row {
  margin-top: 10px;
}
.pt-pay-bank-note {
  font-size: 13px;
  color: var(--cc-ink-500);
  line-height: 1.6;
  margin: 10px 0 0;
}
.pt-pay-methods {
  padding-top: 4px;
}
.pt-pay-methods-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--cc-border-soft);
  border-radius: 3px;
  overflow: hidden;
}
.pt-pay-methods-list li {
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid var(--cc-border-soft);
  border-right: 1px solid var(--cc-border-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 媽媽's mockup, 2026-09-16: each method carries its own mark to the left of the wording,
   so the block reads as a row of payment marks rather than as a bulleted list. */
.pt-pay-methods-list li.pt-pay-m {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.pt-pay-m-mark {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0d2c4d;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-pay-m-icon {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
}
.pt-pay-m-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pt-pay-methods-list li:nth-child(2n) {
  border-right: none;
}
.pt-pay-methods-list li:nth-last-child(-n + 2) {
  border-bottom: none;
}
.pt-pay-zh {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: 14px;
  color: var(--cc-fg-strong);
}
.pt-pay-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400);
  letter-spacing: 0.04em;
}
@media (max-width: 800px) {
  .pt-pay-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pt-pay-bank {
    padding: 28px 24px;
  }
}

/* 2026-05-28 hallmark pass: /shop/ above-fold trust strip + crystal-flagship
 * hero card. Replaces the prior "first thing visitors see = generic WC tiles"
 * pattern with proof-points + an editorial moment that says "crystal is our
 * flagship" before the symmetric 4-up category grid renders. */
.cc-shop-aside {
  background: var(--cc-surface-warm);
  border-bottom: 1px solid var(--cc-border-soft);
  margin-bottom: 32px;
}
.cc-shop-aside-inner {
  max-width: var(--cc-page-max);
  margin: 0 auto;
  padding: 28px var(--cc-gutter) 36px;
}
.cc-shop-truststrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--cc-border-soft);
  font-size: 13px;
  color: var(--cc-fg);
}
.cc-shop-trust-eyebrow {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: var(--cc-fs-micro);
  letter-spacing: 0.22em;
  color: var(--cc-primary-700);
  text-transform: uppercase;
}
.cc-shop-trust-mark {
  font-weight: 500;
  color: var(--cc-fg-strong);
  white-space: nowrap;
}
.cc-shop-trust-mark + .cc-shop-trust-mark::before {
  content: "·";
  color: var(--cc-ink-300);
  margin-right: 16px;
  margin-left: -8px;
}
.cc-shop-trust-note {
  color: var(--cc-ink-500);
  font-style: italic;
  margin-left: auto;
}

.cc-shop-flagship {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--cc-border-soft);
  border-radius: 4px;
  overflow: hidden;
  color: inherit;
  transition:
    box-shadow var(--cc-dur-base) ease,
    transform var(--cc-dur-base) ease;
}
.cc-shop-flagship:hover {
  box-shadow: 0 24px 60px -32px rgba(20, 22, 28, 0.35);
  transform: translateY(-2px);
}
.cc-shop-flagship a {
  text-decoration: none;
}
.cc-shop-flagship-text {
  padding: 44px 48px 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 3px solid var(--cc-primary-500);
}
.cc-shop-flagship-eyebrow {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: var(--cc-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-primary-700);
}
.cc-shop-flagship-title {
  font-family: var(--cc-font-serif-tc);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  color: var(--cc-fg-strong);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
}
.cc-shop-flagship-title .cc-hero-italic {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--cc-primary-700);
}
.cc-shop-flagship-body {
  font-size: var(--cc-fs-body);
  line-height: 1.75;
  color: var(--cc-ink-500);
  margin: 4px 0 8px;
}
.cc-shop-flagship-cta-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 6px;
}
.cc-shop-flagship-cta-primary {
  font-weight: 600;
  color: var(--cc-primary-700);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.cc-shop-flagship-cta-secondary {
  font-size: 13px;
  color: var(--cc-ink-500);
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 1px;
  transition:
    color var(--cc-dur-fast) ease,
    border-color var(--cc-dur-fast) ease;
}
.cc-shop-flagship-cta-secondary:hover {
  color: var(--cc-primary-700);
  border-color: var(--cc-primary-500);
}
.cc-shop-flagship-photo {
  background-image: url(/wp-content/uploads/cc-pages/banner-hero-crystal-no1.webp);
  background-size: cover;
  background-position: center;
  min-height: 320px;
}
@media (max-width: 840px) {
  .cc-shop-flagship {
    grid-template-columns: 1fr;
  }
  .cc-shop-flagship-photo {
    min-height: 220px;
    order: -1;
  }
  .cc-shop-flagship-text {
    padding: 32px 24px;
    border-left: none;
    border-top: 3px solid var(--cc-primary-500);
  }
  .cc-shop-truststrip {
    font-size: 12px;
    gap: 6px 14px;
  }
  .cc-shop-trust-note {
    margin-left: 0;
    width: 100%;
  }
}
/* 2026-06-01 - bumped minimum body font from 13px → 14px per Howard's
 * "make smallest font larger on every page" feedback. 14px is the modern
 * web minimum for legible body copy at typical viewing distance. UI eyebrow
 * captions stay at declared size only if explicitly tagged as eyebrow. */
body,
p,
li,
dd,
dt,
small,
figcaption,
.pt-hdr-tier3-list a,
.pt-hdr-mega-list a,
.pt-recommends-list a,
.cc-recently-viewed-list a,
.pd-why-body,
.pd-why-en,
.pd-deep-stat-label,
.pt-hdr-utility-label,
.pt-hdr-nav-en,
.pt-qf-upload-hint,
.pt-qf-product-cat,
.pt-qf-product-size,
.pt-qf-product-extras-label,
.pt-qf-product-extra,
.pt-qf-product-cfg-label,
.pt-qf-product-cfg-val,
.pg-stat-label,
.cc-shop-flagship-cta-secondary,
.cc-shop-trust-eyebrow,
.cc-shop-trust-mark,
.cc-shop-trust-note,
.woocommerce-result-count,
.woocommerce-ordering,
.posted_in,
.product_meta,
.sku_wrapper,
.tagged_as {
  font-size: var(--cc-fs-body) !important;
}
/* Eyebrow markers explicitly want smaller letter-spaced caps - keep them */
.pt-eyebrow,
.pg-eyebrow,
.cc-shop-flagship-eyebrow,
.pt-hdr-tier2-en {
  font-size: var(--cc-fs-micro) !important;
}

/* Quote-form summary empty cells render an em-dash placeholder. */
.pt-qf-cfg-empty {
  color: var(--cc-ink-400, #9ca3af);
}

/* ─────────────────────────────────────────────────────────────────────────
 * RUSH 5-DAY landing page ([cc_rush_page]) - international cold-outreach LP.
 * ───────────────────────────────────────────────────────────────────────── */
.cc-rush {
  background: var(--cc-surface-warm, #f7f5ef);
}
.cc-rush-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 72px) var(--cc-gutter, clamp(16px, 3vw, 4cm));
}
.cc-rush-hero {
  max-width: 760px;
}
.cc-rush-eyebrow {
  display: inline-block;
  font-family: var(--cc-font-display, serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-primary-700, #1f4f9e);
  margin-bottom: 16px;
}
.cc-rush-h1 {
  font-family: var(--cc-font-serif-tc, Georgia, serif);
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.15;
  font-weight: 600;
  color: var(--cc-ink-900, #15181d);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.cc-rush-lede {
  font-size: var(--cc-fs-lead);
  line-height: 1.75;
  color: var(--cc-ink-600, #4b5563);
  margin: 0 0 28px;
}
.cc-rush-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.cc-rush-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.cc-rush-btn-primary {
  background: var(--cc-primary-700, #1f4f9e);
  color: #fff;
}
.cc-rush-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(31, 79, 158, 0.5);
}
.cc-rush-btn-ghost {
  background: #fff;
  color: var(--cc-primary-700, #1f4f9e);
  border: 1px solid var(--cc-border, #d8dee9);
}
.cc-rush-btn-ghost:hover {
  border-color: var(--cc-primary-500, #2e5cb8);
}

/* Trust strip */
.cc-rush-trust {
  margin: 40px 0 8px;
  padding: 22px 0;
  border-top: 1px solid var(--cc-border-soft, #e6e2d7);
  border-bottom: 1px solid var(--cc-border-soft, #e6e2d7);
}
.cc-rush-trust-label {
  display: block;
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-ink-500, #6b7280);
  margin-bottom: 12px;
}
.cc-rush-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
}
.cc-rush-mark {
  font-family: var(--cc-font-serif-tc, Georgia, serif);
  font-size: var(--cc-fs-body);
  font-weight: 600;
  color: var(--cc-ink-800, #1f2937);
  opacity: 0.85;
}

/* SKU cards */
.cc-rush-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 44px 0;
}
.cc-rush-card {
  background: #fff;
  border: 1px solid var(--cc-border-soft, #e6e2d7);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.cc-rush-card:hover {
  box-shadow: 0 24px 56px -28px rgba(20, 22, 28, 0.3);
  transform: translateY(-3px);
}
.cc-rush-card-photo {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.cc-rush-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--cc-primary-700, #1f4f9e);
  color: #fff;
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 4px;
}
.cc-rush-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cc-rush-card-name {
  font-family: var(--cc-font-serif-tc, Georgia, serif);
  font-size: var(--cc-fs-h3);
  font-weight: 600;
  color: var(--cc-ink-900, #15181d);
  margin: 0 0 8px;
}
.cc-rush-card-spec {
  font-size: var(--cc-fs-body);
  line-height: 1.6;
  color: var(--cc-ink-500, #6b7280);
  margin: 0 0 18px;
  flex: 1;
}
.cc-rush-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cc-rush-card-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-primary-700, #1f4f9e);
}
.cc-rush-card-cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-800, #1f2937);
  text-decoration: none;
  white-space: nowrap;
}
.cc-rush-card-cta:hover {
  color: var(--cc-primary-700, #1f4f9e);
}

/* Process */
.cc-rush-process {
  margin: 52px 0 44px;
}
.cc-rush-process-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-primary-700, #1f4f9e);
  margin-bottom: 22px;
}
.cc-rush-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.cc-rush-step-num {
  font-family: var(--cc-font-display, serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--cc-primary-500, #2e5cb8);
  opacity: 0.5;
}
.cc-rush-step-title {
  font-size: var(--cc-fs-body);
  font-weight: 600;
  color: var(--cc-ink-900, #15181d);
  margin: 8px 0 6px;
}
.cc-rush-step-desc {
  font-size: var(--cc-fs-body);
  line-height: 1.6;
  color: var(--cc-ink-500, #6b7280);
}

/* Final CTA */
.cc-rush-final {
  text-align: center;
  padding: 48px 24px 8px;
}
.cc-rush-final-h2 {
  font-family: var(--cc-font-serif-tc, Georgia, serif);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600;
  color: var(--cc-ink-900, #15181d);
  margin: 0 auto 22px;
  max-width: 640px;
  line-height: 1.25;
}
.cc-rush-final .cc-rush-hero-cta {
  justify-content: center;
}

@media (max-width: 860px) {
  .cc-rush-cards {
    grid-template-columns: 1fr;
  }
  .cc-rush-steps {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}

/* ============================================================
   2026-06-05 - uniform thumbnails · un-squish related · readability
   ============================================================ */

/* (1) UNIFORM THUMBNAILS - product photos shot on different phones/resolutions
   render as a ragged grid. Force every loop/related tile to one tile box and
   `contain` so tall trophies are never cropped; neutral fill hides letterbox. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.wp-post-image,
.related.products ul.products li.product img,
.upsells.products ul.products li.product img,
.pt-featured-grid ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  background: #f7f5f1;
  padding: 10px;
  box-sizing: border-box;
  display: block;
}

/* (2) UN-SQUISH RELATED / UPSELL - they were rendering inside a narrow column.
   Force them full-width below the product and into a real responsive grid. */
.woocommerce .related.products,
.woocommerce .upsells.products {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 48px !important;
}
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
  font-size: var(--cc-fs-h3);
  margin-bottom: 18px;
}
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}
.woocommerce .related.products ul.products::before,
.woocommerce .related.products ul.products::after,
.woocommerce .upsells.products ul.products::before,
.woocommerce .upsells.products ul.products::after {
  display: none !important;
}
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
@media (max-width: 1024px) {
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 680px) {
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* (3) READABILITY - bump the smallest body text that read as too small.
   Eyebrow/label caps left intact (tracking relies on small size). */
.cc-trust-item {
  font-size: var(--cc-fs-control);
} /* 13 → 14.4px */
.cc-footer-tag {
  font-size: var(--cc-fs-control);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--cc-fs-h3) !important; /* 14.4 → 16px */
}
.cc-cat-copy p,
.cc-cat-body p,
.cc-cat-intro p {
  font-size: var(--cc-fs-lead);
  line-height: 1.75;
}

/* ============================================================
   2026-06-05 (b) - larger/clearer fonts + prominent payment + USP + footer addr
   ============================================================ */

/* Bigger body text site-wide (owner: still too small). */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--cc-fs-h3) !important;
  line-height: 1.4;
}
.cc-trust-item {
  font-size: var(--cc-fs-control);
}
.pd-deep-stat-label,
.pg-stat-label {
  font-size: var(--cc-fs-control);
}
.cc-custom-icons span,
.cc-cfg-lbl,
.cc-cfg-chip {
  font-size: 14px;
}
.pt-footer-link,
.cc-footer-link {
  font-size: var(--cc-fs-control);
}
.cc-cat-intro__lede {
  font-size: var(--cc-fs-lead);
  line-height: 1.8;
}

/* Payment methods - prominent + clickable (owner ref: ptrophy.com). */
.pt-procurement {
  background: rgba(255, 255, 255, 0.05);
}
.pt-procurement-list {
  font-size: 15px;
  gap: 10px 0;
}
.pt-procurement-item {
  padding: 6px 18px;
}
.pt-procurement-item strong {
  font-size: 15px;
  font-weight: 700;
}
.pt-procurement-item-en {
  font-size: var(--cc-fs-micro) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-style: normal !important;
}
a.pt-procurement-item {
  text-decoration: none;
  transition:
    color 0.15s,
    background 0.15s;
  border-radius: 4px;
}
/* Hover has to make the chip MORE readable, and this one did the opposite.
   --cc-gold-300 is #8aa6c4, a muted blue-grey despite the name, and this row
   sits on dark navy. So hovering took the label from bright white to dim blue
   on blue and it read as disappearing, which is exactly what the owner
   reported twice. The 12% tint behind it was too faint to compensate.
   Now the panel lifts clearly, the label stays white, and the English
   sub-label brightens with it instead of being left behind. */
a.pt-procurement-item {
  padding: 6px 10px;
}
a.pt-procurement-item:hover,
a.pt-procurement-item:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
a.pt-procurement-item:hover strong,
a.pt-procurement-item:focus-visible strong {
  color: #fff;
}
a.pt-procurement-item:hover .pt-procurement-item-en,
a.pt-procurement-item:focus-visible .pt-procurement-item-en {
  color: rgba(255, 255, 255, 0.95) !important;
}
a.pt-procurement-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
.pt-procurement-label {
  font-size: 13px;
  font-weight: 700;
}

/* Footer address block. */
.pt-footer-addr {
  font-size: var(--cc-fs-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin: 4px 0 0;
}
.pt-footer-addr .pt-addr-en {
  color: rgba(255, 255, 255, 0.72);
}

/* Tailor-made USP banner - site-wide differentiator vs Taobao. */
.cc-usp-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, #407090, #407090);
  color: #fff;
  padding: 11px 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cc-usp-bar .cc-usp-ic {
  color: var(--cc-gold-300);
  font-weight: 700;
}
.cc-usp-bar .cc-usp-en {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-size: 13px;
}
.cc-usp-pdp {
  margin: 14px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--cc-gold-400);
  background: #f9f7f4;
  border-radius: 4px;
  font-size: 15px;
  color: var(--cc-fg-strong);
  line-height: 1.6;
}
.cc-usp-pdp strong {
  color: #407090;
}

/* 2026-06 (greenspark model): SKU code on product loop cards. */
.cc-loop-sku {
  display: block;
  font-size: var(--cc-fs-micro);
  letter-spacing: 0.06em;
  color: var(--cc-ink-400);
  padding: 0 12px 4px;
  font-family: var(--cc-font-en, Inter, sans-serif);
}

/* 2026-07-16: hide the redundant grey SKU subtitle on catalog cards sitewide.
   The SKU remains stored and visible in the product detail specification. */
.woocommerce ul.products li.product .cc-loop-sku,
.pt-featured-grid ul.products li.product .cc-loop-sku {
  display: none !important;
}

/* 2026-06: monochrome-blue palette - buttons need contrast against blue bands.
   Default primary button = blue bg + white text (works on white sections).
   On blue bands (CTA / footer / mega / trustbar) → white bg + blue text. */
a.elementor-button,
.elementor-button {
  background-color: var(--cc-brand-bg) !important;
  color: #fff !important;
}
a.elementor-button:hover,
.elementor-button:hover {
  background-color: var(--cc-logo-blue-deep) !important;
  color: #fff !important;
}
.pt-cta-btn,
.pt-qf-btn,
.pt-hdr-mega-cta,
.pt-cta a.elementor-button,
.pt-footer a.elementor-button,
.cc-footer-dark a.elementor-button {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--cc-brand-bg) !important;
  border: 1px solid #fff !important;
}
.pt-cta-btn:hover,
.pt-qf-btn:hover,
.pt-hdr-mega-cta:hover {
  background: #eef3f5 !important;
  color: var(--cc-logo-blue-deep) !important;
}
.pt-hero-dot.is-active {
  background: #fff !important;
}

/* 2026-06 (greenspark model #1): category pill quick-nav on shop/category pages. */
.cc-pillnav {
  background: #fff;
  border-bottom: 1px solid var(--cc-border);
}
.cc-pillnav-inner {
  max-width: var(--cc-container-wide);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cc-pillnav-inner::-webkit-scrollbar {
  height: 0;
}
.cc-pill {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid var(--cc-brand-bg);
  border-radius: 999px;
  color: var(--cc-brand-bg);
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.cc-pill {
  color: var(--cc-brand-bg);
}
.cc-pill:hover,
.cc-pill.is-active {
  background: var(--cc-brand-bg) !important;
  color: #fff !important;
}
/* 2026-06-26 owner: the washed steel-blue category labels (產品分類 quick-nav
   pills, archive-rail heading, mega category labels) read low-contrast. Switch
   the resting text to the champagne gold used by .pt-feat-sub
   (專業設計團隊，滿足不同需求), per owner direction. Hover / active / current
   states keep their existing high-contrast treatment. */
/* 2026-06-26 owner: pills reverted to blue (the gold read wrong on the pill
   row); rail heading + mega category labels keep the gold contrast fix. */
.cc-subnav-head,
.pt-hdr-tier2-link:not(.is-current):not(:hover):not(:focus-visible)
  .pt-hdr-tier2-zh {
  color: var(--cc-rating-gold) !important;
}

/* 2026-06 (greenspark model #2): left subcategory sidebar on category archives. */
.cc-arch {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  max-width: var(--cc-container-wide);
  margin: 0 auto;
}
.cc-arch-main {
  flex: 1 1 auto;
  min-width: 0;
}
.cc-subnav {
  flex: 0 0 210px;
  position: sticky;
  top: 16px;
}
.cc-subnav-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cc-brand-bg);
  padding: 0 0 10px;
  border-bottom: 2px solid var(--cc-brand-bg);
  margin-bottom: 8px;
}
/* "所有產品 / All products" heading over the product grid - pairs with the 子分類
   rail so the two regions read as separated + headed (archive separation 2026-06). */
.cc-allprods-head {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cc-brand-bg);
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--cc-brand-bg);
}
.cc-subnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-subnav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 14px;
  color: var(--cc-fg);
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s;
}
.cc-subnav-link:hover {
  background: #eef3f5;
  color: var(--cc-brand-bg);
}
.cc-subnav-link.is-active {
  background: var(--cc-brand-bg);
  color: #fff !important;
  font-weight: 600;
}
.cc-subnav-count {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400);
}
.cc-subnav-link.is-active .cc-subnav-count {
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 880px) {
  .cc-arch {
    flex-direction: column;
  }
  .cc-subnav {
    position: static;
    flex: none;
    width: 100%;
  }
  .cc-subnav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .cc-subnav-link {
    padding: 6px 12px;
    border: 1px solid var(--cc-border);
    border-radius: 999px;
  }
}

/* 2026-06-16 redesign: left category accordion rail (cc_catrail) - all parents,
   current expanded, +/− toggle, brand-teal. Pure-CSS via <details>. */
.cc-catrail {
  flex: 0 0 234px;
  position: sticky;
  top: 16px;
  align-self: flex-start;
  /* Owner, 2026-09-09: "for this bar on the left i want an individual scroll bar
     coz now u literally cant scroll when u hv a category extended". A sticky box
     taller than the viewport pins its top and puts its own bottom out of reach,
     which is exactly what an expanded accordion does here. Give it its own
     scroller and stop the wheel handing off to the page at the ends. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c9d3d8 transparent;
  padding-right: 6px;
}
.cc-catrail::-webkit-scrollbar {
  width: 8px;
}
.cc-catrail::-webkit-scrollbar-track {
  background: transparent;
}
.cc-catrail::-webkit-scrollbar-thumb {
  background: #c9d3d8;
  border-radius: 999px;
}
.cc-catrail::-webkit-scrollbar-thumb:hover {
  background: #9fb0b8;
}
.cc-catrail-item {
  border-bottom: 1px solid var(--cc-border, #ece8e0);
}
.cc-catrail-item:first-child {
  border-top: 1px solid var(--cc-border, #ece8e0);
}
.cc-catrail-sum {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.cc-catrail-sum::-webkit-details-marker {
  display: none;
}
.cc-catrail-parent {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.cc-catrail-zh {
  font-family: var(--cc-font-serif-tc, serif);
  font-size: var(--cc-fs-control);
  font-weight: 600;
  color: var(--cc-primary-700, #2f6379);
  letter-spacing: 0.05em;
  line-height: 1.25;
}
.cc-catrail-en {
  font-size: var(--cc-fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-ink-400, #9aa0a6);
  margin-top: 1px;
}
.cc-catrail-toggle {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.cc-catrail-toggle::before,
.cc-catrail-toggle::after {
  content: "";
  position: absolute;
  background: var(--cc-primary-500, #407090);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.cc-catrail-toggle::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}
.cc-catrail-toggle::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}
.cc-catrail-item[open] > .cc-catrail-sum .cc-catrail-toggle::after {
  opacity: 0;
  transform: scaleY(0);
}
.cc-catrail-item.is-current > .cc-catrail-sum {
  background: var(--cc-surface-warm, #f3efe9);
}
.cc-catrail-item.is-current .cc-catrail-zh {
  color: var(--cc-primary-800, #26424f);
}
/* 2026-08-22 owner: an English page should read as English. The header pairs printed the
   Chinese label at full size with the English one as micro caps beneath it, in BOTH locales,
   so /en/ read as a Chinese site with English subtitles. The Chinese locale already drops the
   English half (rule above, "dont leak eng for the chinese page"); this is the mirror of it,
   and each English half takes over the type scale its Chinese partner was using. */
html[lang^="en"] .pt-hdr-nav-zh,
html[lang^="en"] .pt-hdr-tier2-zh,
html[lang^="en"] .pt-hdr-tier3-zh,
html[lang^="en"] .pt-hdr-mobile-cat-zh {
  display: none;
}
/* 2026-09-04: the mega-menu use cards were missing from the list above, so the
   English menu printed every category twice, English then Chinese. That was 43
   Chinese labels on /en/, more than half of all the Chinese left on the page.
   The ZH locale already drops .cc-usecard-en; this is its mirror.
   Scoped with :has() because .cc-usecard-zh is also emitted ALONE, with
   locale-correct text and no English sibling, by the product fallback cards and
   by the archive cards in part-02. Hiding the class outright blanked those on
   the English site. A browser without :has() shows both halves, which is the
   behaviour this replaces, so the fallback is the old state and not a blank. */
html[lang^="en"] .cc-usecard-zh:has(+ .cc-usecard-en) {
  display: none;
}
html[lang^="en"] .pt-hdr-nav-en {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--cc-primary-700);
}
html[lang^="en"] .pt-hdr-tier2-en {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: inherit;
  margin-top: 0;
}
html[lang^="en"] .pt-hdr-tier3-en {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cc-primary-700);
}
html[lang^="en"] .pt-hdr-mobile-cat-en {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cc-fg-strong);
  margin-left: 0;
}
/* 2026-08-22 owner: the English category rail led with the Chinese name, so an
   English page read as Chinese with a small caps subtitle under it. On the English
   locale the English name takes the primary slot and the Chinese one is dropped,
   which is the same treatment the header already gives its bilingual pairs. */
html[lang^="en"] .cc-catrail-zh {
  display: none;
}
html[lang^="en"] .cc-catrail-en {
  font-size: var(--cc-fs-control);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: none;
  color: var(--cc-primary-700, #2f6379);
  margin-top: 0;
}
html[lang^="en"] .cc-catrail-item.is-current .cc-catrail-en {
  color: var(--cc-primary-800, #26424f);
}
.cc-catrail-item:hover > .cc-catrail-sum {
  background: #eef3f5;
}
.cc-catrail-subs {
  list-style: none;
  margin: 0;
  padding: 2px 6px 12px;
}
.cc-catrail-sub,
.cc-catrail-all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 18px;
  font-size: 13px;
  color: var(--cc-fg, #3a3a3a);
  text-decoration: none;
  border-radius: 6px;
  transition:
    background 0.12s,
    color 0.12s;
}
.cc-catrail-all {
  color: var(--cc-primary-600, #407090);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.cc-catrail-sub:hover,
.cc-catrail-all:hover {
  background: #eef3f5;
  color: var(--cc-primary-700, #2f6379);
}
.cc-catrail-sub.is-active {
  background: var(--cc-primary-500, #407090);
  color: #fff;
  font-weight: 600;
}
.cc-catrail-count {
  font-size: var(--cc-fs-micro);
  color: var(--cc-ink-400, #9aa0a6);
}
.cc-catrail-sub.is-active .cc-catrail-count {
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 880px) {
  .cc-catrail {
    position: static;
    flex: none;
    width: 100%;
    margin-bottom: 18px;
  }
}

/* 2026-06-16 redesign: numbered "按用途選擇" use-case cards (mock 01-06 grid). */
.cc-usecards {
  margin: 0 0 30px;
}
.cc-usecards-head {
  margin: 0 0 18px;
}
.cc-usecards-eyebrow {
  display: block;
  margin: 0;
  font-family: var(--cc-font-serif-tc, serif);
  font-size: var(--cc-fs-h2);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cc-ink-900, #1a1a1a);
}
.cc-usecards-rule {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--cc-primary-500, #407090);
  margin: 12px 0 10px;
}
.cc-usecards-sub {
  margin: 0;
  font-size: 14px;
  color: var(--cc-ink-500, #6b7280);
}
.cc-usecards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* 廣告禮品 landing has ~66 subcats - owner: pack 5 per row (vs the default 3).
   The existing <=900px / <=600px breakpoints below still collapse it on mobile. */
body.cc-cat-landing-many .cc-usecards-grid {
  grid-template-columns: repeat(
    4,
    1fr
  ); /* 2026-06-26 owner: 4 per row (was 5) */
  gap: 16px;
}
@media (max-width: 980px) {
  body.cc-cat-landing-many .cc-usecards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  body.cc-cat-landing-many .cc-usecards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
/* 2026-06-17 Claude-Design template card: photo-forward vertical - 4:3 media on
   top with an 01-08 number badge, then gold accent line + serif title + EN sub +
   description + "瀏覽產品" link. */
.cc-usecard {
  display: flex;
  flex-direction: column;
  background: #fff;
  /* 2026-06-17 owner: blue border on every card (use-cards + mega cards). */
  border: 1px solid var(--cc-logo-blue, #407090);
  border-radius: var(--cc-r-lg, 6px);
  overflow: hidden;
  text-decoration: none;
  transition:
    box-shadow 0.2s,
    transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.2s;
}
.cc-usecard:hover {
  box-shadow: var(--cc-shadow-card-hover, 0 6px 22px rgba(0, 0, 0, 0.1));
  transform: translateY(-3px);
  border-color: var(--cc-border-strong, #e0d9cf);
}
.cc-usecard-media {
  position: relative;
  /* 2026-06-17 owner: "render all the photos square" - 1:1 not 4:3. */
  aspect-ratio: 1 / 1;
  /* NO GRADIENT. Owner's mother, 2026-09-07, and he repeated it on 2026-09-08
     because the subcategory pages still had one: "The gradients in the crystal
     trophy subcategory place still have an issue" and "doesnt want the gradients
     at all in front of the images she wants to remove it fully".

     The homepage grid was cleared in part-02.php at the time and this rule was
     missed, which is why she saw it again. It is the tile behind every category
     and subcategory thumbnail on the landing and archive pages, so on any cover
     that does not fill its square the blue ramp shows through and reads exactly
     as the gradient she asked to be gone.

     What replaced it: one flat, very light neutral. Not a two-stop ramp at low
     contrast, because that is still a gradient and this is the second time it
     has been asked for. The 45 degree stripe overlay went with it: it is also a
     repeating gradient and it sat over the photograph. */
  background: #f6f9fb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cc-usecard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cc-usecard:hover .cc-usecard-media img {
  transform: scale(1.05);
}
/* Owner, 2026-09-10, with a screenshot of the flag covers: "for any of the photos where
   the photo has the number on the left top, dont add the additional one in front". Every
   cover his mother supplies already carries its own 01 to 07 badge burned into the top
   left of the artwork, and this rule printed a second badge directly on top of it. The
   theme badge is withdrawn; the number now comes from her artwork alone, which is also
   what keeps the numbering in the order she gave it. */
.cc-usecard-num {
  display: none !important;
}
.cc-usecard-media--ph svg {
  width: 46px;
  height: 46px;
  color: var(--cc-primary-300, #9cc0cf);
  opacity: 0.6;
}
.cc-usecard-tx {
  display: flex;
  flex-direction: column;
  /* flex: 1 1 auto rather than flex: 1, which is correct either way: flex: 1 means
     flex-basis: 0%, and a column flex child with a zero basis inside a content-height
     parent has nothing to grow into.
     THIS DID NOT FIX THE BUG IT WAS WRITTEN FOR, and the note stays so the next person
     does not re-try it. 媽媽 has said twice that the subcategory covers carry no
     description, and on /product-category/commemorative-gift/ the card still ends flush
     with the bottom of the photograph with no text strip at all.
     WHAT IS ALREADY RULED OUT, measured on the live site 2026-09-11:
       - the database: every one of the 65 廣告禮品 terms carries a description;
       - the HTML: the served markup carries
         <span class="cc-usecard-ds">卓越獎品香港自設廠房訂製辦公文具，現有 339 款設計…</span>;
       - the rendered DOM: Chrome --dump-dom against the origin carries the same sentence,
         so no script removes it;
       - the CSS: the served stylesheet carries .cc-usecard-tx, -zh and -ds in full;
       - the colour: --cc-ink-500 resolves to #555555 and --cc-ink-900 to #1a1a1a, so it
         is not white text on a white card;
       - this flex basis.
     What is left is a box the element sits in. The next step is DevTools on the live
     element, not another guess from the stylesheet. */
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}
.cc-usecard-rule {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--cc-rating-gold, #c6a022);
  margin-bottom: 13px;
}
.cc-usecard-zh {
  font-family: var(--cc-font-serif-tc, serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cc-ink-900, #1a1a1a);
  line-height: 1.25;
  margin: 0 0 3px;
}
.cc-usecard-en {
  font-size: var(--cc-fs-micro);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cc-ink-300, #888888);
  margin-bottom: 10px;
}
.cc-usecard-ds {
  font-size: 13px;
  line-height: 1.65;
  color: var(--cc-ink-500, #555555);
  margin: 0 0 16px;
  /* Same correction one level down: this is here to push the "more" link to the bottom
     of the card, and flex-basis: 0% collapsed the sentence instead. */
  flex: 1 1 auto;
}
.cc-usecard-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-primary-600, #2f6379);
}
.cc-usecard-ar {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.25s;
}
.cc-usecard:hover .cc-usecard-ar {
  transform: translateX(4px);
}

/* mock-1 trust/feature strip at the foot of the archive main column */
.cc-archfeat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin: 30px 0 6px;
  padding: 28px 30px;
  background: var(--cc-surface-warm, #faf8f5);
  border: 1px solid var(--cc-border, #ece8e0);
  border-radius: 12px;
}
.cc-archfeat-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cc-archfeat-item svg {
  flex: 0 0 30px;
  color: #b08a3c;
}
.cc-archfeat-item b {
  display: block;
  font-family: var(--cc-font-serif-tc, serif);
  font-size: 15px;
  font-weight: 700;
  color: #1e3a52;
  margin-bottom: 3px;
}
.cc-archfeat-item span {
  font-size: 12px;
  color: #6f7479;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .cc-usecards-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cc-archfeat {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 620px) {
  .cc-usecards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cc-usecards-eyebrow {
    font-size: var(--cc-fs-h2);
  }
  .cc-archfeat {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================================
   2026-06-17 - PARENT-CATEGORY LANDING (Claude-Design "選擇您的…類型" mockup).
   Body class `cc-cat-landing` (part-02 cc_is_parent_landing) hides the rail +
   banner + intro + product grid and lets `.cc-arch-main` go full width, so a
   parent archive reads like the mockup: big serif heading + 4 feature pills,
   photo-fill numbered cards with a circular icon + colored pill button, then a
   bottom contact CTA band. ALL card CSS is SCOPED under `.cc-landing` so the
   global `.cc-usecard-*` used by the mega-menu is untouched.
   ============================================================================ */
.cc-cat-landing .cc-catrail,
.cc-cat-landing .cc-cat-banner,
.cc-cat-landing .cc-cat-intro,
.cc-cat-landing .woocommerce-products-header,
.cc-cat-landing .cc-allprods-head,
.cc-cat-landing .woocommerce-result-count,
.cc-cat-landing .woocommerce-ordering,
.cc-cat-landing ul.products,
.cc-cat-landing nav.woocommerce-pagination,
.cc-cat-landing .woocommerce-pagination,
.cc-cat-landing .cc-archive-more,
.cc-cat-landing .cc-usecases {
  display: none !important; /* R16-css: shape chips visible but lead nowhere on parent landing */
}
.cc-cat-landing .cc-arch {
  display: block;
}
.cc-cat-landing .cc-arch-main {
  width: 100%;
  flex: 1 1 100%;
}

.cc-landing {
  margin: 2px 0 6px;
}
.cc-landing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.cc-landing-title {
  flex: 1 1 360px;
  min-width: 280px;
}
.cc-landing-h {
  font-family: var(--cc-font-serif-tc, serif);
  font-size: clamp(26px, 3.3vw, 40px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.16;
  color: var(--cc-ink-900, #15233a);
  margin: 0 0 8px;
}
.cc-landing-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cc-ink-500, #6b7280);
  max-width: 48ch;
}
.cc-landing-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(168px, 1fr));
  gap: 10px 14px;
  flex: 0 1 auto;
}
.cc-landing-feat {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--cc-border, #e7edf3);
  border-radius: 12px;
  padding: 10px 16px;
}
.cc-landing-feat svg {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  color: var(--cc-logo-blue, #407090);
}
.cc-landing-feat b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cc-ink-900, #15233a);
}
.cc-landing-feat span {
  font-size: 12px;
  color: var(--cc-ink-500, #7b8794);
}

/* photo-fill cards (override the global vertical-card rules within the landing) */
.cc-landing .cc-usecards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cc-landing .cc-usecard {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(20, 40, 80, 0.06);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s;
}
.cc-landing .cc-usecard:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(20, 40, 80, 0.18);
}
.cc-landing .cc-usecard-media {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
  /* THIS is the gradient she kept seeing. Owner, 2026-09-08: "The gradients in the
     crystal trophy subcategory place still have an issue".

     The generic .cc-usecard-media rule was flattened first and the page still showed a
     blue ramp, because .cc-landing overrides it with its own copy of the same gradient,
     absolutely positioned across the whole tile. The subcategory landings are exactly
     the pages that use .cc-landing, so clearing one rule and not the other cleared it
     everywhere except where she was looking.

     Flat, same neutral as the base rule. Nothing paints a ramp behind or over a cover. */
  background: #f6f9fb;
  border-radius: 0;
}
.cc-landing .cc-usecard-media img {
  width: 100%;
  height: 100%;
  /* 2026-06-25 owner: tall crystal products were cropped (top tip + base cut) by
     cover in the landscape card. contain shows the whole product on the card's
     gradient bg. */
  object-fit: contain;
  padding: 14px 14px 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cc-landing .cc-usecard:hover .cc-usecard-media img {
  transform: scale(1.06);
}
/* 2026-09-07, owner's mother, third time on this and each time firmer: first "too
   dark", then "doesnt want the gradient in front of the actual photo", now "doesnt
   want the gradients at all in front of the images she wants to remove it fully".
   The scrim is GONE rather than lightened. Nothing paints over the photograph.
   The text moved out from on top of the image (see .cc-usecard-tx below), so there
   is nothing left for a scrim to make legible. */
.cc-landing .cc-usecard::after {
  content: none;
}
.cc-landing .cc-usecard-media--ph {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-landing .cc-usecard-media--ph svg {
  width: 54px;
  height: 54px;
  color: #9fb4c8;
  opacity: 0.7;
}
.cc-landing .cc-usecard-num {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  font-family: var(--cc-font-mono, monospace);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--uc-accent, #2f6fb0);
  padding: 3px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cc-landing .cc-usecard-ico {
  position: absolute;
  left: 16px;
  bottom: 104px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.cc-landing .cc-usecard-ico svg {
  width: 24px;
  height: 24px;
  color: var(--uc-accent, #2f6fb0);
}
/* Owner's mother, 2026-09-07: "wants the text to be below the photo not on the
   photo". It was absolutely positioned over the image, which is the only reason the
   scrim above ever existed. In normal flow it needs no scrim and no text-shadow. */
.cc-landing .cc-usecard-tx {
  position: static;
  z-index: 2;
  display: block;
  flex: none;
  padding: 14px 16px 16px;
  background: #fff;
}
.cc-landing .cc-usecard-zh {
  font-family: var(--cc-font-serif-tc, serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  /* was #fff with a drop shadow, for the deleted scrim. On the white panel that is
     invisible, so the label takes the brand ink and drops the shadow she also
     asked to remove. */
  color: #0d1a21;
  margin: 0 0 5px;
}
.cc-landing .cc-usecard-ds {
  display: block;
  flex: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a5b66;
  margin: 0 0 12px;
}
.cc-landing .cc-usecard-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--uc-accent, #2f6fb0);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.cc-landing .cc-usecard-ar {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.25s;
}
.cc-landing .cc-usecard:hover .cc-usecard-ar {
  transform: translateX(4px);
}

/* bottom contact CTA band */
.cc-landing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 30px 0 8px;
  padding: 22px 28px;
  background: #eaf4f8;
  border: 1px solid #bddae6;
  border-radius: 16px;
}
.cc-landing-cta-tx b {
  display: block;
  font-family: var(--cc-font-serif-tc, serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--cc-ink-900, #15233a);
  margin-bottom: 3px;
}
.cc-landing-cta-tx span {
  font-size: 13.5px;
  color: var(--cc-ink-500, #6b7280);
}
.cc-landing-cta-btn,
.cc-landing-cta-btn:link,
.cc-landing-cta-btn:visited,
.cc-landing-cta-btn span {
  color: #fff !important;
}
.cc-landing-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  background: var(--cc-primary-500, #0b4f71);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(11, 79, 113, 0.28);
  transition:
    filter 0.2s,
    transform 0.2s;
}
.cc-landing-cta-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .cc-landing .cc-usecards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc-landing-head {
    gap: 22px;
  }
}
@media (max-width: 600px) {
  .cc-landing .cc-usecards-grid {
    grid-template-columns: 1fr;
  }
  .cc-landing-head {
    flex-direction: column;
  }
  /* head is column here, so .cc-landing-title's flex-basis:360px would become a
     360px forced HEIGHT and open a dead gap above the pills - basis:auto on mobile. */
  .cc-landing-title {
    flex: 0 1 auto;
  }
  .cc-landing-feats {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

/* 2026-06 (greenspark model #3): product card badges. */
.woocommerce ul.products li.product {
  position: relative;
}
.cc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-size: var(--cc-fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 3px;
  color: #fff;
  line-height: 1.4;
}
.cc-badge-hot {
  background: #c0392b;
}
.cc-badge-new {
  background: var(--cc-brand-bg);
}

/* ── 2026-06 banners: full-bleed baked-text hero + category-series headers ── */
.pt-hero-banner {
  margin: 0;
  line-height: 0;
  background: #eef5f8;
}
.pt-hero-banner-link {
  display: block;
}
.pt-hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  margin: 0 auto;
}

/* Swiper hero (2026-06-15) - fade carousel of full-bleed baked-text banners
   (no crop; all three composites share 1672×941 so fade height is stable).
   Brand-tinted arrows + pill pagination. Replaces the old scroll-snap rotator. */
.cc-hero-swiper {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
}
.cc-hero-swiper .swiper-slide {
  line-height: 0;
  position: relative;
  overflow: hidden;
}
/* 2026-06-25 owner: homepage hero showed an empty grey band - fade+loop desynced the
   active slide's opacity. Now on the default slide effect; this safety net guarantees
   the active slide is never stuck invisible. */
.cc-hero-swiper .swiper-slide-active {
  opacity: 1 !important;
}
/* soft top+bottom scrim so any baked-in wordmark stays legible over busy photos */
.cc-hero-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
  /* Owner's mother, 2026-09-07: remove gradients (top and bottom scrims) from photos. */
}
.cc-hero-swiper .pt-hero-banner-img {
  max-width: 100%;
  transform: scale(1);
  transition: transform 8s ease-out;
  will-change: auto; /* R35: will-change only on the active slide */
}
/* slow ken-burns drift on the active slide (sub-5% so 16:9 edges never show) */
.cc-hero-swiper .swiper-slide-active .pt-hero-banner-img {
  transform: scale(1.045);
  will-change: transform; /* R35: scope will-change to active slide only */
}
/* R34: non-active slides reset scale instantly (no 8s counter-shrink on exit) */
.cc-hero-swiper .swiper-slide:not(.swiper-slide-active) .pt-hero-banner-img {
  transition: none;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .cc-hero-swiper .pt-hero-banner-img,
  .cc-hero-swiper .swiper-slide-active .pt-hero-banner-img {
    transform: none;
    transition: none;
  }
}
/* R35: dead .swiper-button-prev/.next/.pagination-bullet rules removed -
   hero uses .cc-hero2-prev/.cc-hero2-next/.cc-hero2-arrow; no pill pagination. */

/* 2026-06-17 owner: cinematic hero chrome - replaces the plain pill pagination
   + round arrows with a serif 01/03 index, hairline arrows, and a thin gold
   progress line that fills L→R over each slide's dwell. Engine stays Swiper;
   only the visible treatment changes. Champagne gold is a literal hex because
   the --cc-gold-* tokens were repurposed to blue in the brand refresh. */
.cc-hero-swiper .cc-hero2-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 max(var(--cc-gutter), 24px) 22px;
  pointer-events: none;
}
/* 2026-06-18 owner: slide counter moved out of the bottom controls row to the
   very top-left corner (flush, small inset) so it never sits over the banner's
   baked-in tagline / buttons. Decorative + aria-hidden, so it ignores clicks. */
.cc-hero2-index {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  pointer-events: none;
  font-family: var(--cc-font-display, Georgia, "Songti SC", serif);
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  line-height: 1;
}
.cc-hero2-index-cur {
  font-size: 38px;
  font-weight: 600;
  color: #e3c77f;
}
.cc-hero2-index-sep {
  font-size: 20px;
  opacity: 0.55;
}
.cc-hero2-index-tot {
  font-size: 20px;
  opacity: 0.85;
}
.cc-hero2-nav {
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.cc-hero2-arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition:
    background 0.22s,
    border-color 0.22s,
    color 0.22s;
}
.cc-hero2-arrow:hover {
  background: rgba(227, 199, 127, 0.2);
  border-color: #e3c77f;
  color: #e3c77f;
}
.cc-hero2-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.cc-hero-swiper .cc-hero2-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
  z-index: 4;
}
.cc-hero2-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #e3c77f, #c9a85a);
  box-shadow: 0 0 8px rgba(227, 199, 127, 0.55);
}
@media (max-width: 600px) {
  .cc-hero2-index-cur {
    font-size: 28px;
  }
  .cc-hero2-arrow {
    width: 44px; /* R36: restore 44x44 minimum touch target at mobile */
    height: 44px;
    font-size: 18px;
  }
  .cc-hero-swiper .cc-hero2-controls {
    padding-bottom: 14px;
  }
}
.cc-cat-banner {
  margin: 0 0 22px;
  line-height: 0;
}
.cc-cat-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 4px;
}

/* 2026-06-09: hide the orphan "精選產品" homepage section (its product list was
   removed; only an empty Elementor heading remained). */
.elementor-element-aefca37e {
  display: none !important;
}

/* ===== 2026-06-09 Global legibility bump (+~2px) - owner: text illegible on 16" PC/mobile ===== */
body {
  font-size: var(--cc-fs-body);
}
p,
li,
dd,
dt,
blockquote,
.woocommerce-Tabs-panel {
  font-size: var(--cc-fs-body);
  line-height: 1.75;
}
/* page design-system (order-process, about, category SEO copy) */
.pg-story-text p {
  font-size: var(--cc-fs-lead);
}
.pg-service-desc,
.pg-service-en,
.pg-step-desc,
.pg-finish-desc,
.pg-finish-use,
.pg-quote-body,
.pg-material-meta,
.pg-faq-a,
.pg-faq-q {
  font-size: var(--cc-fs-body);
  line-height: 1.7;
}
.pg-service-title,
.pg-step-title {
  font-size: var(--cc-fs-h3);
}
.pg-eyebrow,
.pg-stat-label,
.pg-service-num,
.pg-story-sig {
  font-size: 14px;
}
.pg-stat-label-en {
  font-size: 12px;
}
/* footer + brand meta */
.pt-footer-list a,
.pt-footer-list span {
  font-size: 16px;
}
.pt-footer-col h4 {
  font-size: 14px;
}
.pt-brand-tag {
  font-size: 15px;
  line-height: 1.7;
}
.pt-brand-tag .en {
  font-size: 13px;
}
.pt-brand-address,
.pt-brand-address span {
  font-size: 13px;
}
/* quote form + small hints */
.pt-qf-upload-text {
  font-size: 15px;
}
.pt-qf-upload-hint {
  font-size: 12px;
}
/* PDP + archive small copy */
.cc-usp-pdp,
.cc-quote-info,
.cc-cat-count,
.woocommerce-breadcrumb {
  font-size: 15px;
}
@media (max-width: 600px) {
  body {
    font-size: var(--cc-fs-lead);
  }
  .pg-story-text p {
    font-size: var(--cc-fs-lead);
  }
}
@media (max-width: 1600px) {
  .pt-hero-banner-img,
  .cc-cat-banner img {
    max-width: 100%;
  }
}

/* 2026-06-09: tidy the category SEO copy into a muted, clearly-separated "About"
   card at the bottom (owner: keep it for SEO but it looked unprofessional raw
   under the product grid). The H1 stays an <h1> for SEO but reads as a small label. */
/* 2026-06-15: elevate the category "About" card to the design system - align to
   the archive content width (1200 + 3cm gutter, was a stray 1000px centred),
   gold top-accent, a real section heading, USP as a 2-col feature grid. */
.cc-cat-intro {
  max-width: 1200px;
  margin: 72px auto 32px;
  padding: 40px clamp(24px, 4vw, 48px);
  padding-inline: max(var(--cc-gutter), 24px);
  background: linear-gradient(
    180deg,
    #fdfcf9 0%,
    var(--cc-surface-cream, #f4efe6) 100%
  );
  /* 2026-06-17 owner: "add blue border to the widget" - brand-blue frame
     on the category SEO/intro block. */
  border: 2px solid var(--cc-logo-blue, #407090);
  border-radius: 12px;
  box-shadow: var(--cc-shadow-1);
  box-sizing: border-box;
}
.cc-cat-intro__h1 {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem) !important;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cc-logo-blue, #407090);
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cc-border, #ece8e0);
}
/* 36x3 gold accent rule above the heading - matches .pg-rule across the
   design system. Rendered via ::before so the part-09 markup is untouched. */
.cc-cat-intro__h1::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin: 0 0 16px;
  background: var(--cc-accent-gold-bright);
}
.cc-cat-intro p,
.cc-cat-intro__lede {
  font-size: var(--cc-fs-body) !important;
  line-height: 1.85;
  color: var(--cc-ink-500, #5b5f66);
  margin: 0 0 16px;
  max-width: 68ch;
}
.cc-cat-intro__usp {
  margin: 4px 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}
.cc-cat-intro__usp li {
  font-size: var(--cc-fs-body);
  line-height: 1.6;
  color: var(--cc-ink-600, #444444);
  padding-left: 24px;
  position: relative;
}
.cc-cat-intro__usp li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-logo-blue, #407090);
  box-shadow: 0 0 0 3px rgba(70, 129, 156, 0.12);
}
.cc-cat-intro__crosslinks {
  font-size: var(--cc-fs-control) !important;
  color: var(--cc-ink-400, #8a8f98);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--cc-border, #e7e2d8);
}
.cc-cat-intro__crosslinks a {
  color: var(--cc-logo-blue, #1f4d61);
  text-decoration: none;
  font-weight: 600;
}
.cc-cat-intro__crosslinks a:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .cc-cat-intro {
    margin: 44px 0 20px;
    padding: 26px 20px;
  }
  .cc-cat-intro__usp {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   2026-06-11  W7 sitewide gutter (match header) + W8 stacked rows
   Header (.pt-hdr-inner) + page wrappers already consume --cc-gutter.
   (a) raise gutter toward ~3cm; (b) make Woo archive/category content
   adopt the header's 1200 + gutter model so it ALIGNS with the header
   (was 1280, ran wider); (c) stack subcats above products.
   ============================================================ */
/* R52: --cc-gutter removed from this block; single source at bottom of file */

/* .cc-arch layout = the flex two-column rule at ~7546 (rail left + main right);
   the old W8 block forced display:block here which broke the rail. Its width/
   margin/padding are already overridden by the last-in-file gutter rule, so the
   whole .cc-arch override is removed - only .cc-cat-banner sizing kept. */
/* 「橫額海報闊道拉寬至綠色左右箭嘴直線空間對齊」, 2026-09-10 22:39, with the screenshot at
   22:38 that settles it. The two green guide lines are drawn at the edges of the CONTENT
   COLUMN, level with the breadcrumb bar above the banner and the category title below it,
   not at the edges of the browser. An earlier reading today sent this to the full viewport,
   which would have pushed the banner under the left category rail and past both edges.
   The banner fills its own column instead, so its edges line up with the bar and the title. */
.cc-cat-banner {
  /* width:auto, not 100%. The gutter rule later in this file sets
     margin-inline: var(--cc-gutter) !important, and a width of 100% is measured
     against the parent BEFORE those margins, so the banner overflowed its column
     by exactly two gutters on every screen. auto lets the margins subtract. */
  width: auto;
  max-width: none;
  margin: 0 0 8px;
  padding-inline: 0;
  box-sizing: border-box;
}
.cc-cat-banner img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.cc-arch-main {
  flex: 1 1 auto;
  min-width: 0;
}
.cc-subnav {
  position: static !important;
  flex: none !important;
  width: 100% !important;
  top: auto;
  margin: 0 0 22px;
}
.cc-subnav-head {
  display: inline-block;
  margin: 0 12px 10px 0;
  border-bottom: none;
  padding: 0;
}
.cc-subnav-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}
.cc-subnav-link {
  padding: 7px 14px;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
}
.cc-subnav-link .cc-subnav-count {
  margin-left: 6px;
}

/* W9 - shrink + horizontally compact the category banner (tighter than content) */
.cc-cat-banner {
  max-width: 1000px;
}
@media (max-width: 1024px) {
  .cc-cat-banner {
    max-width: 100%;
  }
}

/* ============================================================
   2026-06-11b BANNER SIZING (owner) - supersedes the rules above.
   • align to the 1200 content width + 3cm page gutter (= "align with the rest")
   • vertically compressed → ~320px, scrolls past in 1-2 wheel/touchpad moves
   • object-fit:contain keeps the WHOLE image (PT logo + baked text, no crop)
     and leaves white space on each side, per owner.
   ============================================================ */
/* ============================================================
   2026-06-12 - SINGLE SOURCE OF TRUTH for the site side-gutter.
   Owner spec: EVERY frame (header content, banners, page content,
   footer) starts at the SAME vertical line, measured from the
   physical viewport edge: ~3cm in on a 16" screen, ~2.5cm on 14",
   proportional below that, capped on very large monitors.
   Section *backgrounds* stay full-bleed; their inner CONTENT aligns
   to the gutter. Old model centered a max-width box (1200/1618) AND
   added padding → variable, oversized side space on wide screens
   (the recurring "it's not 3cm" miss). New model: each frame is
   full width minus exactly one gutter each side, no centering cap.
   This block is LAST in the file → wins the cascade.
   6.5vw → 1728px:112px(2.97cm) · 1512px:98px(2.6cm) · cap 170px.
   ============================================================ */
:root {
  --cc-gutter: clamp(
    20px,
    6.5vw,
    170px
  ); /* SINGLE SOURCE - do not add another :root --cc-gutter block */

  /* Owner, 2026-09-14: "the banner shd be shrank 5%, and the text and the category
     cards shd be horizontally compressed to match the banner's width".

     Measured before changing anything, with scripts/measure.py at a 1920 viewport,
     because the stylesheet predicted the opposite of what his screenshot showed:
       .pt-hero-banner-img   1600 wide, left 160, right 1760
       .cc-homecats-inner    1720 wide, left 100, right 1820
     So the banner was the narrow one at 1600 and the copy and the card row overhung
     it by 60px on each side. 1600 x 0.95 = 1520, and the content frame now takes the
     SAME number from this one variable, so the three left edges line up and stay lined
     up. Do not hard code 1520 anywhere: change it here. */
  --cc-banner-max: 1520px;
}
/* every top-level content frame → edge sits exactly on the gutter line */
.pt-hdr-utility-inner,
.pt-hdr-inner,
.pt-hdr-search-inner,
.pt-hdr-mega-inner,
.cc-pillnav-inner,
.pg-hero-inner,
.pg-section-inner,
.pt-trustbar-inner,
.pt-trusted-inner,
.pt-featured-inner,
.pt-svc-inner,
.pt-cta-inner,
.pt-qf-inner,
.pt-procurement-inner,
.pt-bottom,
.cc-crystal-hero-inner,
.cc-crystal-spec-inner,
.cc-recently-viewed-inner,
.pt-recommends-inner,
.cc-trustbar-inner,
.cc-content-inner,
.cc-tag-archive-inner,
.cc-legal-inner,
.cc-rush-inner,
.pt-footer-inner,
.cc-arch,
.pt-hero-banner,
.cc-cat-banner {
  max-width: none !important;
  margin-inline: var(--cc-gutter) !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}
/* banners: image IS the banner (native 16:9, no letterbox, no crop) */
.pt-hero-banner,
.cc-cat-banner {
  margin-block: 0 16px;
  background: transparent;
}
/* Owner, 2026-09-10: "cover banner is the 5 of them on the home page that doesnt need
   fixing only the width needs fixing". The five slides were correct and sat in a column
   narrower than the screen, because the Elementor section around them carries its own
   max-width, and a max-width on the child cannot widen a narrower parent. This breaks
   out of that parent to the full viewport, then caps the picture itself so a 27 inch
   monitor does not stretch a 1600px photograph. */
@media (min-width: 701px) {
  .pt-hero-banner,
  .pt-hero-banner.pt-hero-swiper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .pt-hero-banner .pt-hero-banner-img {
    max-width: 1920px !important;
    margin-inline: auto !important;
  }
}
.pt-hero-banner-img,
.cc-cat-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}
/* The block comment above states the owner's rule as contain, "keeps the WHOLE image
   (PT logo + baked text, no crop)", and the shared rule had drifted to cover, which
   crops every banner that is not exactly 16:9. The home hero keeps cover: he said the
   five slides there do not need fixing. */
.cc-cat-banner img {
  object-fit: contain;
}
/* 媽媽, 2026-09-11 07:11, 「左右對齊」 with two green arrows drawn OUTSIDE the banner at
   the far left and right, and again at 07:17 「箭嘴」. Her screenshot of
   /product-category/.../ shows the breadcrumb pill above the banner spanning the whole
   content card while the banner itself sits inset by one gutter on each side, which is
   the white strip her arrows point across.
   The source art is NOT the problem: banner-2026-acrylic.webp is 1672x941, already 16:9,
   so object-fit was never letterboxing it. The inset came from the gutter rule earlier in
   this file, which applies margin-inline: var(--cc-gutter) !important to .cc-cat-banner
   along with the page wrappers that genuinely need it.
   The banner is not a page wrapper. It fills its own column, edge to edge with the
   breadcrumb above it and the category title below it, which is what 左右對齊 asks for. */
.cc-cat-banner {
  margin-inline: 0 !important;
}
/* mobile: shrink the gutter so narrow screens aren't mostly margin */
@media (max-width: 700px) {
  :root {
    --cc-gutter: clamp(12px, 5vw, 28px);
  }
}

/* 2026-07-16: archive orientation widgets. Keep the breadcrumb, title,
   result status, and product rows on one shared content edge. The breadcrumb
   becomes a compact location widget so the active category reads immediately
   below the quick-nav rather than disappearing into the page background. */
body.woocommerce .cc-arch-main > .woo-breadcrumbs,
body.woocommerce .cc-arch-main > .breadcrumb-trail,
body.woocommerce .cc-arch-main > .woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  margin: 0 0 20px !important;
  padding: 8px 14px !important;
  box-sizing: border-box;
  border: 1px solid rgba(64, 112, 144, 0.2);
  border-left: 4px solid var(--cc-primary-500, #407090);
  border-radius: 7px;
  background: linear-gradient(90deg, #f0f5f7 0%, #fbfaf8 72%);
  color: var(--cc-primary-700, #2f6379);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 14px rgba(38, 66, 79, 0.06);
}
body.woocommerce .cc-arch-main > .woo-breadcrumbs::before,
body.woocommerce .cc-arch-main > .breadcrumb-trail::before,
body.woocommerce .cc-arch-main > .woocommerce-breadcrumb::before {
  content: "✦";
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cc-primary-500, #407090);
  color: var(--cc-gold-300, #e4c46a);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(38, 66, 79, 0.18);
}
body.woocommerce .cc-arch-main > .woo-breadcrumbs::after,
body.woocommerce .cc-arch-main > .breadcrumb-trail::after,
body.woocommerce .cc-arch-main > .woocommerce-breadcrumb::after {
  content: "目前位置";
  flex: 0 0 auto;
  color: var(--cc-primary-500, #407090);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.woocommerce .cc-arch-main > .woo-breadcrumbs .breadcrumb-trail {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body.woocommerce .cc-arch-main > .woo-breadcrumbs a,
body.woocommerce .cc-arch-main > .breadcrumb-trail a,
body.woocommerce .cc-arch-main > .woocommerce-breadcrumb a {
  color: var(--cc-primary-700, #2f6379);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease;
}
body.woocommerce .cc-arch-main > .woo-breadcrumbs a:hover,
body.woocommerce .cc-arch-main > .breadcrumb-trail a:hover,
body.woocommerce .cc-arch-main > .woocommerce-breadcrumb a:hover {
  color: var(--cc-primary-500, #407090);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.woocommerce .cc-arch-main > .woo-breadcrumbs .breadcrumb_last,
body.woocommerce .cc-arch-main > .breadcrumb-trail .breadcrumb_last,
body.woocommerce .cc-arch-main > .woocommerce-breadcrumb .breadcrumb_last {
  color: var(--cc-fg-strong, #1f2d33);
  font-weight: 700;
}

/* Turn the existing WooCommerce status and ordering controls into a quiet
   utility widget row that visually hands off to the product grid. */
body.woocommerce .cc-arch-main > .woocommerce-result-count,
body.woocommerce .cc-arch-main > .woocommerce-ordering {
  margin-top: 0;
  margin-bottom: 18px;
}
body.woocommerce .cc-arch-main > .woocommerce-result-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--cc-border-soft, #e6e0d8);
  border-radius: 6px;
  background: #fff;
  color: var(--cc-ink-500, #777);
  font-size: 12px;
}
body.woocommerce .cc-arch-main > .woocommerce-result-count::before {
  content: "目錄";
  color: var(--cc-primary-500, #407090);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
body.woocommerce .cc-arch-main > .woocommerce-ordering select {
  min-height: 36px;
  border-color: rgba(64, 112, 144, 0.35);
  border-radius: 6px;
  background: #fff;
  color: var(--cc-fg-strong, #1f2d33);
  box-shadow: 0 3px 10px rgba(38, 66, 79, 0.04);
}
html[lang^="en"] body.woocommerce .cc-arch-main > .woo-breadcrumbs::before,
html[lang^="en"] body.woocommerce .cc-arch-main > .breadcrumb-trail::before,
html[lang^="en"]
  body.woocommerce
  .cc-arch-main
  > .woocommerce-breadcrumb::before {
  content: "✦";
}
html[lang^="en"] body.woocommerce .cc-arch-main > .woo-breadcrumbs::after,
html[lang^="en"] body.woocommerce .cc-arch-main > .breadcrumb-trail::after,
html[lang^="en"]
  body.woocommerce
  .cc-arch-main
  > .woocommerce-breadcrumb::after {
  content: "YOU ARE HERE";
}
html[lang^="en"]
  body.woocommerce
  .cc-arch-main
  > .woocommerce-result-count::before {
  content: "CATALOGUE";
}

@media (max-width: 700px) {
  body.woocommerce .cc-arch-main > .woo-breadcrumbs,
  body.woocommerce .cc-arch-main > .breadcrumb-trail,
  body.woocommerce .cc-arch-main > .woocommerce-breadcrumb {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-bottom: 16px !important;
  }
  body.woocommerce .cc-arch-main > .woo-breadcrumbs::before,
  body.woocommerce .cc-arch-main > .breadcrumb-trail::before,
  body.woocommerce .cc-arch-main > .woocommerce-breadcrumb::before {
    width: 28px;
  }
}

/* 2026-07-16: foreground the archive controls shown in the supplied UI
   references. The select and page numbers now share the same soft widget
   language as the breadcrumb, with the blue current state leading the eye. */
body.woocommerce .cc-arch-main > .woocommerce-ordering {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px 5px 12px;
  border: 1px solid rgba(64, 112, 144, 0.18);
  border-radius: 10px;
  background: linear-gradient(135deg, #f1f6f8 0%, #fff 68%);
  box-shadow: 0 4px 14px rgba(38, 66, 79, 0.06);
}
body.woocommerce .cc-arch-main > .woocommerce-ordering::before {
  content: "排序";
  color: var(--cc-primary-500, #407090);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}
body.woocommerce .cc-arch-main > .woocommerce-ordering::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 7px 4px 0;
  border-right: 1.5px solid var(--cc-primary-700, #2f6379);
  border-bottom: 1.5px solid var(--cc-primary-700, #2f6379);
  transform: rotate(45deg);
  pointer-events: none;
}
body.woocommerce .cc-arch-main > .woocommerce-ordering select {
  min-width: 126px;
  padding: 8px 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cc-fg-strong, #1f2d33);
  box-shadow: none;
  appearance: none;
}
body.woocommerce .cc-arch-main > .woocommerce-ordering select:focus-visible {
  outline: 2px solid rgba(64, 112, 144, 0.35);
  outline-offset: 2px;
}
html[lang^="en"]
  body.woocommerce
  .cc-arch-main
  > .woocommerce-ordering::before {
  content: "SORT";
}

/* Products-per-page, sitting beside the sort widget and borrowing its shell so
   the two read as one control strip. Its label is real markup rather than a
   ::before, because the select needs something to be labelled by. Owner
   2026-08-17, modelled on edco.com's "Display per page". */
.cc-perpage {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 0 10px;
  padding: 5px 7px 5px 12px;
  border: 1px solid rgba(64, 112, 144, 0.18);
  border-radius: 10px;
  background: linear-gradient(135deg, #f1f6f8 0%, #fff 68%);
  box-shadow: 0 4px 14px rgba(38, 66, 79, 0.06);
  vertical-align: middle;
}
.cc-perpage label {
  color: var(--cc-primary-500, #407090);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin: 0;
}
.cc-perpage::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 7px;
  height: 7px;
  margin-bottom: 4px;
  border-right: 1.5px solid var(--cc-primary-700, #2f6379);
  border-bottom: 1.5px solid var(--cc-primary-700, #2f6379);
  transform: rotate(45deg);
  pointer-events: none;
}
.cc-perpage select {
  min-width: 64px;
  padding: 8px 22px 8px 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cc-fg-strong, #1f2d33);
  box-shadow: none;
  appearance: none;
}
.cc-perpage select:focus-visible {
  outline: 2px solid rgba(64, 112, 144, 0.35);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .cc-perpage {
    margin: 8px 0 0;
  }
}

/* 2026-07-16: the WooCommerce shop now owns the richer `/product/` landing
   content. Keep the existing shop shell and archive hooks available, while
   removing the duplicate native category grid and title that followed it. */
body.post-type-archive-product .woocommerce-products-header,
body.post-type-archive-product > .woocommerce-products-header,
body.post-type-archive-product #main > .woocommerce-products-header,
body.post-type-archive-product #main > ul.products,
body.post-type-archive-product .woocommerce > ul.products,
/* The 2026-07-16 merge folds the /product/ landing into /shop/ and hides Woo's own
 * category tiles so one catalogue renders, not two. The original selector required a
 * DESCENDANT element carrying class `woocommerce`, and this theme emits that class on
 * <body> only: measured 2026-08-14, zero non-body elements match it. So the rule never
 * applied and /shop/ shipped two stacked catalogues, both headed 商品分類, from the day
 * of the merge. Matching on the body class alone is what the rule always meant. */
body.post-type-archive-product ul.products,
body.post-type-archive-product .woocommerce-result-count,
body.post-type-archive-product .woocommerce-ordering,
body.post-type-archive-product .woocommerce-pagination {
  display: none !important;
}
.cc-shop-merged-landing {
  display: block;
  margin: 0 calc(var(--cc-gutter, 6.5vw) * -1);
  padding: 0 var(--cc-gutter, 6.5vw) 48px;
  background: var(--cc-surface-warm, #f7f5ef);
}
.cc-shop-merged-landing .cc-rotator,
.cc-shop-merged-landing .elementor {
  max-width: none;
}
@media (max-width: 700px) {
  .cc-shop-merged-landing {
    margin-inline: calc(var(--cc-gutter, 5vw) * -1);
    padding-inline: var(--cc-gutter, 5vw);
  }
}

.woocommerce nav.woocommerce-pagination {
  margin: 10px 0 46px;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(64, 112, 144, 0.28);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(38, 66, 79, 0.06);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  border: 0;
  border-right: 1px solid rgba(64, 112, 144, 0.2);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li:last-child {
  border-right: 0;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0 !important;
  background: #fff;
  color: var(--cc-fg-strong, #1f2d33) !important;
  font-size: 15px;
  line-height: 1;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover {
  background: #eef4f6;
  color: var(--cc-primary-700, #2f6379) !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--cc-primary-500, #407090) !important;
  color: #fff !important;
  font-weight: 700;
}
@media (max-width: 700px) {
  body.woocommerce .cc-arch-main > .woocommerce-ordering {
    padding-left: 10px;
  }
  body.woocommerce .cc-arch-main > .woocommerce-ordering select {
    min-width: 108px;
  }
  .woocommerce nav.woocommerce-pagination ul.page-numbers li a,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li span {
    width: 38px;
    height: 38px;
  }
}

/* ── "Browse all products" → /product banner page (2026-06-18) ──
   The mega-menu foot now carries two CTAs: a ghost "查看全部產品" and the filled
   "查詢報價". Earlier rules force .pt-hdr-mega-cta to a white pill with !important,
   so the ghost override + foot layout sit here (last in file) with !important. */
.pt-hdr-mega-foot {
  justify-content: flex-start !important;
}
.pt-hdr-mega-foot .pt-hdr-mega-cta--ghost {
  margin-left: auto;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--cc-primary-700, #2c6b86) !important;
  border: 1.5px solid var(--cc-primary-500, #407090) !important;
}
.pt-hdr-mega-foot .pt-hdr-mega-cta--ghost:hover {
  background: var(--cc-primary-500, #407090) !important;
  border-color: var(--cc-primary-500, #407090) !important;
  color: #fff !important;
}
/* mobile mega: full-width all-products link pinned above the category list */
.pt-hdr-mobile-allprod {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding: 13px 16px;
  background: var(--cc-primary-500, #407090);
  color: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pt-hdr-mobile-allprod:hover {
  background: var(--cc-primary-700, #2c6b86);
  color: #fff;
}

/* 2026-06-18 owner (mother: 整體文字大多 1PT) - footer text +1px across the board.
   Scoped to footer classes so the rest of the site is untouched. */
.pt-footer-col h4 {
  font-size: 14px;
}
.pt-footer-col h4 .pt-h4-en {
  font-size: 13px;
}
.pt-footer-list a,
.pt-footer-list span {
  font-size: 15px;
}
.pt-footer-list .is-quiet a {
  font-size: 14px;
}
.pt-footer-list .is-flagship .pt-flagship-tag {
  font-size: 12px;
}
.pt-contact-item {
  font-size: 15px;
}
.pt-contact-hours,
.pt-contact-hours strong {
  font-size: 13px;
}
.pt-bottom,
.pt-bottom-copy,
.pt-bottom-legal a,
.pt-bottom-domain {
  font-size: 13px;
}
.pt-feat-item b {
  font-size: 16px;
}
.pt-feat-sub {
  font-size: 13px;
}

/* 2026-06-25 owner: merged contact-us → quote-basket (one entry, in header).
   Contact card sits above the [cc_quote_basket] form on /quote-basket/. */
.cc-contact-card {
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--cc-border, #e6e1d8);
  border-radius: var(--cc-r-lg, 14px);
  box-shadow: var(--cc-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.cc-contact-h {
  font-family: var(--cc-font-serif-tc, serif);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--cc-logo-blue, #1f3a5f);
  margin: 0 0 14px;
}
.cc-contact-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.cc-contact-list li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--cc-border-soft, #f0ece4);
  font-size: 15px;
  line-height: 1.5;
}
.cc-contact-list li:last-child {
  border-bottom: 0;
}
.cc-contact-list li > span {
  flex: 0 0 92px;
  color: var(--cc-ink-300, #8a8579);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.cc-contact-list a {
  color: var(--cc-logo-blue, #1f3a5f);
  text-decoration: none;
}
.cc-contact-list a:hover {
  text-decoration: underline;
}
.cc-contact-lead {
  margin: 0;
  color: var(--cc-fg, #3a3a3a);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Plaque PDP 2-column tailored layout (owner 2026-06-30) ──────────────────
 * Scoped to body.cc-plaque-pdp so no other product is affected.
 * Gallery = hero only (thumb strip hidden); 應用場景 renders under the photo
 * (left), 細節 + 多角度 under the customise panel (right). */
.cc-plaque-pdp .flex-control-thumbs {
  display: none !important;
}
.cc-plaque-pdp .cc-plq-left {
  max-width: none;
  margin: 18px 0 0;
  padding: 0;
}
.cc-plaque-pdp .cc-plq-right {
  max-width: none;
  margin: 22px 0 0;
  padding: 0;
}
.cc-plaque-pdp .cc-plq-left .cc-plq-block,
.cc-plaque-pdp .cc-plq-right .cc-plq-block {
  margin: 0 0 18px;
}
.cc-plaque-pdp .cc-plq-left .cc-plq-h,
.cc-plaque-pdp .cc-plq-right .cc-plq-h {
  font-size: 17px;
  margin-bottom: 10px;
}
.cc-plaque-pdp .cc-plq-left .cc-plq-g3,
.cc-plaque-pdp .cc-plq-right .cc-plq-g3 {
  gap: 10px;
}
/* real-colour swatch inside a material/colour chip (two-class specificity beats .cc-sw) */
.cc-cfg-chip.cc-cfg-chip-sw {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cc-cfg-chip .cc-cfg-sw {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.cc-sw-cnavy {
  background: #1f3a5f;
}
/* 淺黃. The class name says lightblue because the option key does, and that key
   is written into saved quote line items; renaming it would orphan the colour on
   past quotes. #e0b400 read as a deep gold next to 琥珀 #d9a441, so the two were
   near-indistinguishable, and #f5e08c was still the darker of the two yellows.
   Owner 2026-08-17, twice: "方格顏色改更淺黃色". */
.cc-sw-clightblue {
  background: #fbeda1;
}
/* 黑. Same story as the yellow one directly above: the key is `purple` and stays
   that way for the saved quotes, and the square has always been drawn black, so
   the word 紫 was the only wrong part. Owner 2026-08-17: 紫改黑. */
.cc-sw-cpurple {
  background: #1a1a1a;
}
.cc-sw-camber {
  background: #d9a441;
}
.cc-sw-cred {
  background: #c0392b;
}
.cc-sw-cgreen {
  background: #3a8a4a;
}
/* 描述 tab - styled card instead of bare text */
.cc-plaque-pdp .woocommerce-Tabs-panel--description {
  background: #fafaf8;
  border: 1px solid #ece8e0;
  border-radius: 12px;
  padding: 24px 28px;
  line-height: 1.9;
  color: #3a4256;
  font-size: 15px;
}
.cc-plaque-pdp .woocommerce-Tabs-panel--description > h2 {
  color: var(--cc-logo-blue, #15305a);
  margin-top: 0;
}
/* ── 2-column grid rebuild (desktop ≥ 881px) ──────────────────────────────────
 * LEFT  col 1: hero photo (row 1) + 應用場景 (row 2, directly under the photo).
 * RIGHT col 2: the customise panel + 細節 + 多角度 (the .summary, spanning rows).
 * Everything else (band, text sections, tabs, related) defaults to full width. */
@media (min-width: 881px) {
  .cc-plaque-pdp div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  .cc-plaque-pdp div.product > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .cc-plaque-pdp div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .cc-plaque-pdp div.product > .summary {
    grid-column: 2;
    grid-row: 1 / span 2;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .cc-plaque-pdp div.product > .cc-plq-scenes {
    grid-column: 1;
    grid-row: 2;
    margin-top: 18px;
  }
}
/* 應用場景 block sizing in the narrower left column */
.cc-plaque-pdp .cc-plq-scenes {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
.cc-plaque-pdp .cc-plq-scenes .cc-plq-g3 {
  gap: 10px;
}

/* 2026-07-15 product-card image rule: preserve the existing card, background,
   lighting, shadow, reflection, watermark, and logo. Only the image viewport
   is normalized. `contain` scales down automatically whenever the full product
   would otherwise exceed the frame. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product-category a img,
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product-category img,
.pt-featured-grid ul.products li.product img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-height: none !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center;
}

@media (max-width: 680px) {
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product-category a img,
  .woocommerce ul.products li.product img,
  .woocommerce ul.products li.product-category img,
  .pt-featured-grid ul.products li.product img {
    margin-bottom: 10px !important;
  }
}

/* 2026-07-15 TEST category only: show the complete source image inside a
   fixed square viewport. The source image already contains its own lighting,
   reflection/shadow treatment, watermark, logo, and product text. */
body.term-test-batch.woocommerce ul.products li.product .cc-pwm,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-pwm {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  margin: 0 auto 14px;
  overflow: hidden;
}

body.term-test-batch.woocommerce ul.products li.product .cc-pwm > img,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-pwm > img {
  display: block;
  flex: 0 0 auto;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.term-test-batch.woocommerce
  ul.products
  li.product
  .woocommerce-loop-product__title,
body.term-test-batch
  .pt-featured-grid
  ul.products
  li.product
  .woocommerce-loop-product__title {
  width: 100%;
  min-height: 52px;
  max-height: calc(1.4em * 2);
  padding: 0 12px !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.term-test-batch.woocommerce ul.products li.product .cc-loop-sku,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-loop-sku,
body.term-test-batch.woocommerce ul.products li.product .cc-atq,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-atq {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 2026-07-15 TEST review: keep the card focused on title and quote action.
   The grey SKU line and recent-product badge are intentionally hidden here;
   the SKU remains stored in WooCommerce and is unchanged on the product page. */
body.term-test-batch.woocommerce ul.products li.product .cc-loop-sku,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-loop-sku,
body.term-test-batch.woocommerce ul.products li.product .cc-badge,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-badge {
  display: none !important;
}

body.term-test-batch.woocommerce ul.products,
body.term-test-batch.woocommerce-page ul.products,
body.term-test-batch .pt-featured-grid ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1000px) {
  body.term-test-batch.woocommerce ul.products,
  body.term-test-batch.woocommerce-page ul.products,
  body.term-test-batch .pt-featured-grid ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.term-test-batch.woocommerce ul.products,
  body.term-test-batch.woocommerce-page ul.products,
  body.term-test-batch .pt-featured-grid ul.products {
    grid-template-columns: 1fr !important;
  }

  body.term-test-batch.woocommerce ul.products li.product .cc-pwm,
  body.term-test-batch .pt-featured-grid ul.products li.product .cc-pwm {
    margin-bottom: 10px;
  }
}

/* 2026-07-15 TEST category card rhythm: fixed content flow without adding
   another visual layer below the SKU. */
body.term-test-batch.woocommerce ul.products li.product,
body.term-test-batch .pt-featured-grid ul.products li.product {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.term-test-batch.woocommerce
  ul.products
  li.product
  > a.woocommerce-LoopProduct-link,
body.term-test-batch
  .pt-featured-grid
  ul.products
  li.product
  > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
body.term-test-batch.woocommerce ul.products li.product .cc-pwm,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-pwm {
  flex: 0 0 auto;
}
body.term-test-batch.woocommerce
  ul.products
  li.product
  .woocommerce-loop-product__title,
body.term-test-batch
  .pt-featured-grid
  ul.products
  li.product
  .woocommerce-loop-product__title {
  height: calc(1.4em * 2);
  min-height: calc(1.4em * 2);
}
body.term-test-batch.woocommerce ul.products li.product .cc-loop-sku,
body.term-test-batch .pt-featured-grid ul.products li.product .cc-loop-sku {
  min-height: 0;
}

/* ============================================================
   HOMEPAGE BANDS - 2026-07 design sync (Homepage.dc.html)
   [cc_home_usecases] occasion pill band + [cc_home_cases] strip
   ============================================================ */
.pt-usecase-band {
  background: #fff;
  border-top: 1px solid var(--cc-border, #ece8e0);
  border-bottom: 1px solid var(--cc-border, #ece8e0);
  padding: 34px var(--cc-gutter, clamp(20px, 5vw, 64px));
}
.pt-usecase-inner {
  display: flex;
  align-items: center;
  gap: 14px 18px;
  flex-wrap: wrap;
}
.pt-usecase-head {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  margin-right: 10px;
}
.pt-usecase-head-zh {
  font-family: var(--cc-font-serif-tc, serif);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--cc-ink-900, #1a1a1a);
}
.pt-usecase-head-en {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-ink-300, #888);
}
.pt-usecase-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--cc-border-strong, #e0d9cf);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-ink-800, #222);
  background: #fff;
  transition:
    border-color 150ms,
    color 150ms,
    background 150ms;
}
.pt-usecase-pill:hover {
  border-color: var(--cc-primary-500, #0b4f71);
  color: var(--cc-primary-700, #062f43);
  background: var(--cc-ice, #eaf4f8);
}
.pt-usecase-pill:focus-visible {
  outline: none;
  box-shadow: var(--cc-focus, 0 0 0 3px rgba(11, 79, 113, 0.25));
}

.pt-homecases {
  background: #fff;
  padding: var(--cc-section-pad-y, clamp(48px, 7vw, 96px))
    var(--cc-gutter, clamp(20px, 5vw, 64px));
  border-bottom: 1px solid var(--cc-border, #ece8e0);
}
.pt-homecases-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.pt-homecases-title {
  margin: 0;
  font-family: var(--cc-font-serif-tc, serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--cc-ink-900, #1a1a1a);
  letter-spacing: 0.03em;
}
.pt-homecases-title-en {
  font-family: var(--cc-font-display, serif);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--cc-ink-400, #777);
}
.pt-homecases-all {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-primary-600, #083e59);
  text-decoration: none;
}
.pt-homecases-all:hover {
  color: var(--cc-primary-500, #0b4f71);
}
.pt-homecases-rule {
  width: 36px;
  height: 3px;
  background: var(--cc-primary-500, #0b4f71);
  margin: 14px 0 34px;
}
.pt-homecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pt-homecase-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cc-border, #ece8e0);
  border-radius: var(--cc-r-lg, 6px);
  overflow: hidden;
  text-decoration: none;
  transition:
    box-shadow 200ms var(--cc-ease-settle, ease),
    transform 200ms var(--cc-ease-settle, ease);
}
.pt-homecase-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cc-shadow-card-hover, 0 6px 22px rgba(0, 0, 0, 0.1));
}
.pt-homecase-rule {
  display: block;
  height: 3px;
  background: var(--cc-steel-500, #3d6979);
}
.pt-homecase-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--cc-surface-photo, #f7f5f1);
  overflow: hidden;
}
.pt-homecase-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pt-homecase-body {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
}
.pt-homecase-client {
  font-family: var(--cc-font-serif-tc, serif);
  font-weight: 700;
  font-size: 17.5px;
  color: var(--cc-ink-900, #1a1a1a);
  letter-spacing: 0.02em;
}
.pt-homecase-made {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--cc-ink-600, #444);
}
.pt-homecase-more {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-primary-600, #083e59);
}
@media (max-width: 960px) {
  .pt-homecases-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   VISUAL PASS 2026-07-18 - additive only (cc-visual-pass-20260718)
   1) Mobile: the hero trust bar and trusted-by strips push content past
      the viewport (390px device measured scrollWidth 908), giving the
      whole page a horizontal wobble. Clip at the leaking sections and at
      the document as a backstop. `clip` rather than `hidden` so
      position:sticky descendants keep working; @supports fallback for
      older engines. Inner table scrollers (.overflow-x:auto wrappers)
      are their own scroll containers and are unaffected.
   2) Keyboard focus fallback: zero-specificity (:where) outline for any
      interactive element the component-level :focus-visible rules miss.
   ============================================================ */
html,
body {
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}
.pt-hero-trustbar,
.pt-trusted {
  overflow-x: clip;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cc-primary-600, #083e59);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pt-homecase-card,
  .pt-trusted-mark,
  .pt-trusted-mark-gov {
    transition: none;
  }
  .pt-homecase-card:hover {
    transform: none;
  }
}

/* /shop/ category overview (2026-08-14). Replaces the injected Elementor page,
   which rendered the same ten categories twice under two identical headings. */
.cc-shopcats {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 56px;
}
.cc-shopcats-head {
  text-align: center;
  margin: 0 0 28px;
}
.cc-shopcats-head h2 {
  font-family: var(--cc-font-serif-tc, "Noto Serif TC", serif);
  font-size: clamp(24px, 3vw, 36px);
  color: #1a2730;
  margin: 0 0 8px;
}
.cc-shopcats-head p {
  color: #5b6770;
  margin: 0;
  font-size: 1rem;
}
.cc-shopcats-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cc-shopcat {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cc-border-soft, #e6e6e6);
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.cc-shopcat:hover {
  box-shadow: 0 16px 34px -18px rgba(20, 30, 40, 0.35);
  transform: translateY(-2px);
}
/* The flagship range earns a wider card rather than a badge: the catalogue's
   biggest seller should read as bigger, not as decorated. */
.cc-shopcat.is-flagship {
  grid-column: span 2;
}
.cc-shopcat-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f4f2;
}
.cc-shopcat.is-flagship .cc-shopcat-media {
  aspect-ratio: 16 / 9;
}
.cc-shopcat-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b1a2f;
  display: block;
}
.cc-shopcat-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.cc-shopcat-ttl {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}
.cc-shopcat-ttl a {
  color: #1a2730;
  text-decoration: none;
}
.cc-shopcat-ttl a:hover {
  color: var(--cc-brand, #3a82ad);
}
.cc-shopcat-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #7b858c;
  letter-spacing: 0.02em;
}
.cc-shopcat-n {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef3f6;
  color: #3a5766;
  font-weight: 600;
  font-size: 0.78rem;
}
.cc-shopcat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-shopcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--cc-border-soft, #e6e6e6);
  border-radius: 999px;
  font-size: 0.8rem;
  color: #3a5766;
  text-decoration: none;
  background: #fbfbfa;
}
.cc-shopcat-chip:hover {
  border-color: var(--cc-brand, #3a82ad);
  color: var(--cc-brand, #3a82ad);
}
.cc-shopcat-chip span {
  color: #97a1a8;
  font-size: 0.74rem;
}
.cc-shopcat-go {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cc-brand, #3a82ad);
  text-decoration: none;
}
.cc-shopcat-go:hover {
  text-decoration: underline;
}
@media (max-width: 700px) {
  .cc-shopcats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cc-shopcat.is-flagship {
    grid-column: span 2;
  }
  .cc-shopcat-body {
    padding: 12px 12px 14px;
    gap: 8px;
  }
  .cc-shopcat-ttl {
    font-size: 1rem;
  }
  .cc-shopcat-chips {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Hover and focus affordance, added 2026-08-14 on the owner's report:
   "since it disabled copy, its hard to see where im hovering over".

   Text selection is switched off site-wide, and selection was doing more work
   than anyone intended: it was the only feedback that the pointer was over
   something. With it gone a button looks identical hovered and not, so a
   customer cannot tell what is clickable without clicking.

   Additive only. No colours, radii or spacing are redefined, so nothing that
   already looks right can shift; these rules fire only while hovered, focused
   or pressed. Keyboard users get the same signal through :focus-visible, which
   does not fire on mouse clicks and so cannot leave a ring stuck on a button
   after a tap.
   --------------------------------------------------------------------------- */
:root {
  --cc-hover-ink: var(--cc-brand, #3a82ad);
}

a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link,
.elementor-button,
.add_to_cart_button,
.cc-quote-add,
.woocommerce-LoopProduct-link,
.product-category > a,
li.product a,
.cc-shopcat,
.page-numbers {
  cursor: pointer;
  transition:
    box-shadow 0.14s ease,
    transform 0.14s ease,
    background-color 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    opacity 0.14s ease;
}

/* Buttons: lift and ring. Enough to read at a glance, small enough that a row
   of them does not jump around as the pointer crosses it. */
button:hover,
[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.add_to_cart_button:hover,
.cc-quote-add:hover {
  box-shadow:
    0 0 0 2px rgba(58, 130, 173, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
button:active,
[role="button"]:active,
input[type="submit"]:active,
.button:active,
.wp-block-button__link:active,
.elementor-button:active,
.add_to_cart_button:active,
.cc-quote-add:active {
  transform: translateY(0);
  box-shadow: 0 0 0 2px rgba(58, 130, 173, 0.75) inset;
}

/* Text links: an underline is the signal people already know.
   PILL-SHAPED CONTROLS ARE EXCLUDED, and that exclusion is the fix for a defect
   the owner reported twice (2026-09-06, then again on the English pages).
   A pill is a button wearing an <a>. Repainting its label var(--cc-hover-ink)
   #3a82ad made things worse in both directions: on a white pill the label fell
   from 13.13:1 to 4.22:1, and on the SELECTED pill, whose fill is #0b4f71, the
   same colour lands at 1.60:1, which is why the current chip read as a solid
   blue lozenge with no text in it at all on /en/product-category/trophy/. */
a:not(.button):not(.wp-block-button__link):not(.elementor-button):not(
    .cc-sub-chip
  ):not(.cc-subnav-item):not(.cc-pill):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--cc-hover-ink);
}

/* The subcategory chips rendered by cc_subcats (part-02.php). Hover DARKENS:
   the label keeps its resting ink, the pill gains a pale brand tint. The
   selected chip keeps white on #0b4f71 through hover instead of dissolving. */
/* !important IS LOAD-BEARING HERE AND IS NOT LAZINESS.
   Measured in a real browser 2026-09-07, computed style on the selected chip:
   color rgb(70,129,156) on background rgb(11,79,113). Two theme rules set
   `color: inherit` on
       a:not(.elementor-button):not(.button):not(.cc-enquiry-btn)
       a:not(.elementor-button):not(.button):not(.cc-enquiry-btn):not(.cc-btn)
   at specificity (0,5,1) and (0,4,1), so the chip inherited Elementor's link
   blue from .elementor-kit-586 a. Beating that with plain selectors needs six
   classes on a chip, which is worse than this. My previous fix used
   .cc-sub-chip.cc-sub-chip.is-on at (0,3,0) and lost silently, which is why he
   saw no change: #46819C on #0b4f71 is 1.35:1, a label you cannot read. */
.cc-sub-chip.cc-sub-chip:hover,
.cc-sub-chip.cc-sub-chip:focus-visible {
  color: #2b3138 !important;
  background: #eef4f8;
  border-color: var(--cc-logo-blue, #0b4f71);
  text-decoration: none;
}
.cc-sub-chip.cc-sub-chip.is-on,
.cc-sub-chip.cc-sub-chip.is-on:hover,
.cc-sub-chip.cc-sub-chip.is-on:focus-visible {
  color: #fff !important;
  background: var(--cc-brand-bg, #0b4f71);
  border-color: var(--cc-brand-bg, #0b4f71);
  text-decoration: none;
}
/* The resting chip loses its ink to the same `inherit` rules. */
.cc-sub-chip.cc-sub-chip {
  color: #2b3138 !important;
}
/* The subcategory rail and the category pills sit under the identical rules. */
.cc-subnav-item.cc-subnav-item {
  color: #2b3138 !important;
}
.cc-subnav-item.cc-subnav-item.is-current {
  color: #fff !important;
}
.cc-pillnav .cc-pill {
  color: var(--cc-brand-bg, #0b4f71) !important;
}
.cc-pillnav .cc-pill:hover,
.cc-pillnav .cc-pill.is-active {
  color: #fff !important;
}
/* The count sat at opacity .55, which on the selected chip is white at 55% over
   #0b4f71: readable as a shape, not as a number. */
.cc-sub-chip .cc-sub-n {
  opacity: 0.72;
}
.cc-sub-chip.is-on .cc-sub-n {
  opacity: 0.85;
}

/* Product and category cards: the whole tile is the target, so the whole tile
   has to respond. Hovering the image and getting nothing is the case the owner
   actually hit. */
li.product:hover,
.product-category:hover,
.cc-shopcat:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
  transform: translateY(-2px);
}
li.product:hover img,
.product-category:hover img {
  opacity: 0.93;
}

/* Keyboard. Never :focus, which fires on click too and leaves a ring behind. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid rgba(58, 130, 173, 0.85);
  outline-offset: 2px;
}

/* A disabled control must not look clickable. */
button:disabled,
input:disabled,
.button.disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}
button:disabled:hover,
input:disabled:hover,
.button.disabled:hover,
[aria-disabled="true"]:hover {
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  a,
  button,
  [role="button"],
  .button,
  .elementor-button,
  li.product,
  .product-category,
  .cc-shopcat {
    transition: none;
  }
  button:hover,
  .button:hover,
  .elementor-button:hover,
  li.product:hover,
  .product-category:hover,
  .cc-shopcat:hover {
    transform: none;
  }
}

/* ============================================================
   PDP CTA HIERARCHY  (2026-08-25)
   Measured before this change: the quote button rendered disabled on arrival
   while the WhatsApp button beside it did not, and 90 days of search traffic
   produced no real quote submission at all. The quote button is now live on
   load (see seedFirstSize in inc/part-02.php), so this makes it read as the
   primary action and demotes WhatsApp to a secondary outline beside it.
   WhatsApp is not hidden. It stays a real escape hatch, and it now carries the
   visitor's configuration into the message.
   ============================================================ */
.single-product.woocommerce .summary.entry-summary .cc-atq-wrap {
  margin-right: 12px;
}
.single-product.woocommerce .summary.entry-summary .cc-atq-wrap .cc-atq {
  min-width: 240px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Secondary: keep the WhatsApp green as an outline rather than a filled block,
   so two filled buttons no longer compete for the same glance. */
.single-product.woocommerce
  .summary.entry-summary
  .cc-pdp-cta-wa
  .cc-whatsapp-btn {
  background: transparent !important;
  color: #1f7a44 !important;
  border: 1px solid #1f7a44 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.single-product.woocommerce
  .summary.entry-summary
  .cc-pdp-cta-wa
  .cc-whatsapp-btn:hover {
  background: #1f7a44 !important;
  color: #fff !important;
}
@media (max-width: 600px) {
  /* Quote first on mobile, where the thumb reaches the lower button and the
     upper one is what gets read. */
  .single-product.woocommerce .summary.entry-summary .cc-atq-wrap {
    order: 1;
    margin-bottom: 8px;
  }
  .single-product.woocommerce .summary.entry-summary .cc-pdp-cta-wa {
    order: 2;
  }
  .single-product.woocommerce .summary.entry-summary .cc-atq-wrap .cc-atq {
    min-width: 0;
  }
}

/* Related-product cards on a PDP link through to the product instead of
   offering an add button that page can never enable. Same shape as the compact
   button it replaces so the card layout does not move. */
.cc-atq-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Commercial facts strip under the category USP bar (2026-08-25). No price is
   published because none exists in the catalogue: 0 of 8,242 published products
   carry a price. These three are already promised elsewhere on the site. */
.cc-usp-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 6px 0 10px;
  font-size: 13px;
  color: #5b6b78;
}
.cc-usp-fact::before {
  content: "✓";
  margin-right: 5px;
  color: #407090;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Hover on dark surfaces: make it brighter, never dimmer.

   Owner, 2026-08-28, twice: the payment row "doesnt look good" on hover and is
   "still invisible when hover", and he asked for every hover setting to be
   checked. It was not one rule, it was a pattern.

   --cc-gold-300 is #8aa6c4 despite its name: a muted blue-grey. Six rules used
   it as the hover colour for links that sit on the dark navy footer, whose
   resting colour is white at 60 to 82 percent. So hovering moved every one of
   them from near-white to dim blue on blue, reducing contrast at the exact
   moment the user is pointing at the thing. That is the whole complaint.

   These come last in the file so they win without editing six separate blocks,
   and each carries the surface it applies to. Light-background hovers are left
   alone: there the same token is a perfectly reasonable accent.
   --------------------------------------------------------------------------- */
.cc-footer-link:hover,
.cc-footer-link:focus-visible,
.pt-footer-list a:hover,
.pt-footer-list a:focus-visible,
.pt-footer-list .is-flagship a:hover,
.pt-bottom-legal a:hover,
.pt-bottom-legal a:focus-visible {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-btn-ghost-light:hover,
.cc-btn-ghost-light:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
}

/* Keyboard users were getting nothing at all on these, since only :hover was
   ever styled. */
.cc-footer-link:focus-visible,
.pt-footer-list a:focus-visible,
.pt-bottom-legal a:focus-visible,
.cc-btn-ghost-light:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Stop the floating WhatsApp button sitting on top of the footer.

   Owner, 2026-08-28: "overlap is still obscuring some parts of the website",
   with a screenshot of the green button covering crystalcentury.com.

   The geometry made it inevitable rather than unlucky. .pt-floater is fixed at
   right:22px bottom:22px and is 58px across, so it owns the bottom-right 80 by
   80 pixels of the viewport permanently. .pt-bottom-legal carries margin-left:
   auto, which pins the domain and the legal links to the right edge of the same
   band. On a window narrower than the 1200px content column they occupy the
   same space, which is why it looks fine on a wide monitor and broken on his.

   Reserving the gutter is better than moving the button: the button is meant to
   be reachable, and extra footer whitespace costs nothing. */
.pt-bottom {
  padding-bottom: 96px;
}

@media (max-width: 1340px) {
  .pt-bottom-legal {
    padding-right: 92px;
  }
}

/* Same reasoning for the sticky add-to-cart bar, which is also pinned bottom
   right and would land under the button on a product page. */
@media (max-width: 1340px) {
  .woolentor-add-to-cart-sticky {
    padding-right: 92px;
  }
}

/* ============================================================
   FOOTER ADDRESS - his father, 2026-08-30 14:56
   「加入複製按鈕, 文字font size 要有12point, 地址更改為...」
   12 point is 16px at the browser default, which is what 12pt renders as
   in Word and what he is comparing against.
   ============================================================ */
.pt-addr-line {
  font-size: 16px;
  line-height: 1.55;
  display: block;
}
/* Howard, 2026-09-03: hours belong in the location block, not in PAY TO. They
   read as a second fact about the shop, so they get a rule above them rather
   than running straight on from the street address. */
.pt-addr-hours {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pt-addr-hours + .pt-addr-hours {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}
.pt-addr-copy-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.pt-addr-copy {
  font-size: 13px;
  padding: 5px 11px;
}

/* ---------------------------------------------------------------------------
   Whole-card click target for category and subcategory tiles.
   Owner's mother, 2026-08-31: she wants to reach a category by clicking the
   photo, not only the text.

   The photo was already wrapped in an anchor, so the miss was the card's own
   padding: the gap around the image, the gap under the title, and the count
   pill all swallowed the click and did nothing. Widening the anchor was not
   enough on its own for the same reason.

   Method: one stretched pseudo-element on the title anchor, covering the whole
   card. It keeps a single real <a> per tile, so the link text Google reads and
   the accessible name a screen reader announces are both unchanged, and it adds
   no markup and no JavaScript. The image anchor keeps working underneath for
   anyone who lands on it directly.
   --------------------------------------------------------------------------- */
.cc-catcard,
.woocommerce ul.products li.product-category {
  position: relative;
}
.cc-catcard .elementor-image-box-title a::after,
.woocommerce ul.products li.product-category > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* The image anchor must not sit above the stretched one, or the padding is
   clickable and the photo is not, which is the bug inverted. */
.cc-catcard .elementor-image-box-img a {
  position: static;
}
/* Cursor over the whole card, so it reads as one target before it is clicked. */
.cc-catcard,
.woocommerce ul.products li.product-category {
  cursor: pointer;
}

/* Footer payment details, owner's father 2026-08-31. Sits under the address
   block and matches its width and muted treatment so the footer keeps one
   visual column rather than gaining a second card. */
.pt-brand-pay {
  max-width: 320px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--cc-gold-500);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
.pt-brand-pay-head {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}
.pt-brand-pay-list {
  margin: 0;
  display: block;
  font-style: normal;
}
/* Howard, 2026-09-02: "for the pay to block try to render it in the same row".
   The shared grid column took the width of the longest label (轉數快識別碼 FPS ID)
   and left the account number a column too narrow to hold it, so every value
   wrapped onto a second line on a phone. Each pair is now its own flex row: the
   label is only as wide as itself, and the value never wraps. */
.pt-brand-pay-list .pt-brand-pay-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 2px;
}
.pt-brand-pay-list dt {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.pt-brand-pay-list dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* owner 2026-09-03: copy buttons at font 6, label included */
.pt-pay-copy,
.pt-pay-copy .pt-pay-copy-label,
.pt-pay-copy span {
  font-size: 6pt !important;
  line-height: 1.2;
}
.pt-pay-copy svg {
  width: 6px;
  height: 6px;
} /* -30% with the button */

/* 2026-09-03, the owner's mother: a copyright line on every page, readable but
   quiet. Sits under the existing bottom row and wraps on a phone. */
.pt-bottom-rights {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.52);
  max-width: 100%;
}
.pt-bottom-rights .pt-bi-en {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.42);
}
@media (max-width: 640px) {
  .pt-bottom-rights {
    font-size: 10.5px;
  }
}

/* ---------------------------------------------------------------------------
   Header row: the language switcher must never be clipped off the right edge.
   Owner's father, 2026-09-05 00:08:52, with a screenshot of
   /en/product-category/medal/commemorative-medals-en/ and a yellow circle round
   the top-right of the header: 「選擇英文語言的時候。黃色圈繁體字，英文字按鈕消失不見了。」

   The markup was never at fault. Both pills render on every page, verified on
   /, /en/ and on the exact page he circled. The row was overflowing instead.
   .pt-hdr-nav is flex:1 and a flex item defaults to min-width:auto, so it
   refuses to shrink below its content width and pushes .pt-hdr-actions, which
   is flex-shrink:0, past the right edge of .pt-hdr-inner. The language pills sit
   at the end of that block, so they are the first thing to disappear.

   min-width:0 lets the nav give way, which is what it is there for: its gap
   already clamps from 30px down to 12px. The pills are pinned so they cannot be
   chosen as the thing to sacrifice.
   --------------------------------------------------------------------------- */
.pt-hdr-nav {
  min-width: 0;
}
.pt-hdr-actions {
  min-width: max-content;
}
.pt-hdr-lang {
  flex: 0 0 auto;
}

/* ============================================================
   SUBCATEGORY PILL HOVER: DARKER, NOT LIGHTER  (2026-09-06)

   Owner: "contrast when hovering over the product selecton page also unviewable".

   Measured, and he is right. The pill label rests at #2b3138 on white, which is
   13.13:1. Hovering it handed the label to the global link rule
   (a:not(.button):hover { color: var(--cc-hover-ink) }), which is the brand blue
   #3a82ad on white: 4.22:1. So pointing at a control made its text three times
   harder to read, and the only other feedback was a 1px border moving from
   #e2ddd3 to #407090.

   Hover now behaves the way the selected state already does: the ink stays the
   resting near-black, the pill gains a pale brand tint and a full-strength brand
   border, and the underline is dropped because the pill is a button shape, not a
   run of body text. Contrast on hover is the resting 13.13:1.

   The :hover rule must beat the global one on specificity, so the class is
   repeated rather than marked important.
   ------------------------------------------------------------ */
.cc-subnav-item.cc-subnav-item:hover,
.cc-subnav-item.cc-subnav-item:focus-visible {
  color: #2b3138;
  background: #eef4f8;
  border-color: var(--cc-logo-blue, #407090);
  text-decoration: none;
}
/* The count keeps its own contrast rather than fading further under the pointer. */
.cc-subnav-item.cc-subnav-item:hover .cc-subnav-n {
  opacity: 0.85;
}
/* Selected stays selected: a hover over the current pill must not repaint it
   pale, which would read as "not selected any more". */
.cc-subnav-item.is-current.cc-subnav-item:hover,
.cc-subnav-item.is-current.cc-subnav-item:focus-visible {
  color: #fff;
  background: var(--cc-logo-blue, #407090);
  border-color: var(--cc-logo-blue, #407090);
}

/* ============================================================
   CATEGORY PILL ROW ON A 14-INCH LAPTOP  (2026-09-07)

   Owner: "in 14 or smaller inch desktop, the circles surrounding the text are
   too big such that they overflow in the same row, reduce the horizontal size
   of the circles such that they will more or less fit within the same row".

   MEASURED FIRST, because the honest answer is that padding alone cannot close
   it. .cc-pillnav-inner is capped by --cc-container-wide: 1280px, so it has
   1232px of usable width after its 24px gutters. Laying the twelve labels out
   at the shipped 13px/16px-padding/8px-gap:

       Chinese   1341px   over by 109px
       English   1967px   over by 735px

   The Chinese row is a padding problem and is fixed below. The English row is
   not: its labels carry 735px more text, and "Plaques & Commemorative Awards"
   cannot be padded down to fit. Shrinking type far enough to fit English would
   land around 9px, which is not a readable navigation control.

   So this tightens as far as it can go while staying readable, and the row keeps
   its existing horizontal scroll for whatever is left. Measured after, against
   1248px of usable width once the gutters come in to 16px:

       at <=1536px   Chinese 1175px FITS      English 1801px, over by 553 (was 735)
       at <=1366px   Chinese 1051px FITS      English 1635px, over by 387 (was 735)

   Applied at 1536px and below, which covers a 14-inch MacBook Pro (1512 CSS px)
   and every smaller desktop; above that the row already fits comfortably.
   ------------------------------------------------------------ */
@media (max-width: 1536px) {
  .cc-pillnav-inner {
    gap: 6px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .cc-pillnav .cc-pill {
    padding: 6px 10px;
    letter-spacing: 0;
  }
}
@media (max-width: 1366px) {
  .cc-pillnav-inner {
    gap: 5px;
  }
  .cc-pillnav .cc-pill {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* ============================================================
   ENGLISH PILL ROW WRAPS TO TWO ROWS  (2026-09-07)

   Owner, after being told the English labels could not fit one line: "for
   english, render the display in two rows then".

   The block above tightens the pills as far as they go and still leaves English
   at 1801px against 1248px of usable width, because "Plaques & Commemorative
   Awards" and "Promotional & Corporate Gifts" simply carry more text than the
   container has room for. Rather than scroll a nav most people never think to
   drag sideways, English wraps.

   Chinese is deliberately NOT wrapped: it measures 1175px and already fits on
   one line, so wrapping it would introduce a second row for nothing.

   overflow-x has to go back to visible in the same breath as flex-wrap. A
   wrapping flex container that is still an overflow-x:auto scroller computes its
   own scroll width and can clip the second row instead of showing it.
   ------------------------------------------------------------ */
html[lang^="en"] .cc-pillnav-inner {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 8px;
  justify-content: flex-start;
}

/* ============================================================
   PHONE: THE HEADER CONTROLS WERE OFF THE EDGE, AND UNDER-SIZED  (2026-09-07)

   Owner: "ux/ui is all messed up on mobile ipad and smaller monitors".

   MEASURED at 390x844 with a real iPhone user agent, on / , /product-category/
   trophy/ and /quote-basket/ (scripts/responsive-audit.js):

     .pt-hdr-actions            right edge 404 on a 390 viewport
     .pt-hdr-menu-toggle        right edge 404, so the hamburger was clipped
     .pt-hdr-icon-btn           38x38, under the 44x44 touch floor
     .cc-pill                   43x33
     .pt-pay-copy               70x18 and 66x22
     .pt-homecases-all          110x22

   The hamburger hanging off the right edge is the one that matters: it is how a
   phone visitor opens the menu at all.

   CAUSE, and why the obvious fix would have been a regression. `.pt-hdr-actions`
   carries `min-width: max-content`, added 2026-09-05 to stop the nav squeezing the
   language pills out of existence after his father sent a screenshot of exactly
   that. On a 390px viewport that same rule forbids the block from shrinking, so it
   is pushed past the edge instead. Removing it outright would bring his father's
   bug straight back on desktop, so this releases the constraint ONLY on phones,
   where the nav is collapsed behind the hamburger and there is nothing to protect.

   The page never scrolled sideways: documentElement.scrollWidth equalled the
   viewport at every width. The controls were clipped, not overflowing the document.

   NOT TOUCHED: .pt-trusted-list reports as 1447px wide inside 390px and is correct
   as it stands. It is a deliberate horizontal scroller (flex-wrap:nowrap,
   overflow-x:auto, parent overflow-x:clip). Same for the swiper slides. Both were
   false positives in the first run of the audit and the audit now skips them.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* The block that was actually overflowing is the LOGO, not the actions.
     Measured at 390: .pt-hdr-inner is 334px, a.pt-hdr-logo is 230px and refuses to
     shrink, .pt-hdr-actions is 152px, and 230 + 12 gap + 152 = 394. The actions get
     pushed out because the logo will not give way, so the hamburger lands off-screen.
     Cap the logo at whatever is left after the controls and let it scale. */
  .pt-hdr-logo {
    min-width: 0;
    flex: 0 1 auto;
    max-width: calc(100% - 172px);
    overflow: hidden;
  }
  .pt-hdr-logo img,
  .pt-hdr-logo svg {
    max-width: 100%;
    height: auto;
  }
  .pt-hdr-actions {
    min-width: 0;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .pt-hdr-icon-btn {
    width: 44px;
    height: 44px;
  }
  .cc-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .pt-pay-copy {
    min-height: 44px;
    padding-block: 11px;
  }
  .pt-homecases-all {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Blog archive: hovered photos must not overlap their neighbours ──────────
   Owner + his mother, 2026-09-07: "on the blog the photos overlap when hovered
   upon". The archive uses the Hello Elementor default `.post` markup with a
   `wp-post-image`, and the hover zoom is a transform on the image itself. A
   transform paints outside the element's layout box, so a scaled photo spills
   over the card next to it and lifts above it in the stacking order.

   The zoom is kept, because it is the intended affordance. It is CONTAINED: the
   link becomes the clipping box, so the picture grows inside its own frame. The
   stacking fix matters as much as the clip, since `position: relative` alone
   would keep the last card painting over the others. */
.blog .post .post-thumbnail,
.archive .post .post-thumbnail,
.blog .post a:has(> .wp-post-image),
.archive .post a:has(> .wp-post-image) {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  isolation: isolate;
}
.blog .post .wp-post-image,
.archive .post .wp-post-image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--cc-dur-fast, 0.18s) var(--cc-ease-out, ease-out);
  will-change: transform;
}
.blog .post:hover .wp-post-image,
.archive .post:hover .wp-post-image {
  transform: scale(1.04);
}
/* Nothing in a card may escape the card, whatever Elementor applies on hover. */
.blog .post,
.archive .post {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
/* Owner's mother, 2026-09-07: prevent scaled image from overlapping neighbour cards on hover.
   Media wrapper needs overflow hidden and its own stacking context. */
.blog .post .post-image,
.blog .post .wp-post-image,
.archive .post .post-image,
.archive .post .wp-post-image {
  display: block;
  overflow: hidden;
}

/* The footer column headings moved from h4 to h3 so the document does not skip a level
   (PSI heading-order). The SIZE has to move with them, otherwise fixing the outline
   changes the design, which is how the wrong tag got chosen in the first place. */
.pt-footer-h {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Upload failure on the quote success screen. A customer submitted on 2026-09-07 believing his
   logo had uploaded, and the form had said nothing; this is the notice that would have told him.
   Amber rather than red: the quote itself succeeded, only the file did not. */
.cc-quote-upload-warn {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid #e0b341;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fdf7e7;
  text-align: left;
}
.cc-quote-upload-warn p {
  margin: 0 0 6px;
}
.cc-quote-upload-warn ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.cc-quote-upload-warn li {
  margin: 2px 0;
  word-break: break-word;
}

/* ------------------------------------------------------------------
   Footer contrast, 2026-09-14. Howard: "bad fucking contrast" and then
   "all of the footer actually needs greater contrast".

   The footer sits on --cc-brand-bg, a dark navy, and every text layer in it was
   set in translucent white: the body at 0.7, the link list at 0.82, the address
   and its English line at 0.72. Against that navy a 0.7 white lands around 7:1,
   which passes a checker and still reads as washed out next to the gold headings,
   which is what he is looking at. These are raised to 0.92 to 0.98, so the text is
   near solid white and the gold stays the accent rather than the only legible thing.

   The 由我的位置導航前往 button is a separate bug, not a contrast tweak. Its own rule
   in mu-plugins/cc-store-map.php already says color:#ffffff on #14395f, and it was
   rendering mid blue with an underline, so a generic footer anchor rule was winning
   on the cascade. Pinned here with the footer ancestor in the selector so it wins
   without !important.
   ------------------------------------------------------------------ */
.pt-footer { color: rgba(255, 255, 255, 0.92); }
.pt-footer-list a,
.pt-footer-list span,
.pt-footer-list .is-quiet a,
.pt-footer-list .is-quiet span { color: rgba(255, 255, 255, 0.97); }
.pt-footer-addr,
.pt-footer-addr .pt-addr-en { color: rgba(255, 255, 255, 0.9); }
.pt-footer p,
.pt-footer li,
.pt-footer span,
.pt-footer dd { color: rgba(255, 255, 255, 0.92); }
.pt-footer a { color: rgba(255, 255, 255, 0.97); }
.pt-footer a:hover,
.pt-footer a:focus-visible { color: var(--cc-gold-300, #e3c77f); }

/* Column headings: 聯絡我們 was already gold and the others were not, so they read as
   two different levels of importance when they are the same level. */
.pt-footer-col h4,
.pt-footer h4 { color: #e9cf8c; }
.pt-footer-col h4 .pt-h4-en,
.pt-footer h4 .pt-h4-en { color: rgba(233, 207, 140, 0.85); }

/* The directions button keeps its own white on navy. */
.pt-footer .cc-store-map-dir,
.pt-footer a.cc-store-map-dir,
.pt-addr-dir a.cc-store-map-dir {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 0;
  background: #14395f;
  border: 1px solid #7ea8c9;
}
.pt-footer .cc-store-map-dir svg,
.pt-addr-dir a.cc-store-map-dir svg { stroke: #ffffff; }
.pt-footer a.cc-store-map-dir:hover,
.pt-addr-dir a.cc-store-map-dir:hover { background: #1b4a78; color: #ffffff; }

/* The strip below the columns was still dim after the block above, because it is a
   separate component: .pt-bottom with its own copy, rights, legal and domain lines.
   Howard: "all of the footer actually needs greater contrast", and all means this too. */
.pt-bottom { color: rgba(255, 255, 255, 0.9); }
.pt-bottom-copy,
.pt-bottom-rights,
.pt-bottom-domain,
.pt-bottom-legal,
.pt-bottom-legal a,
.pt-bottom a { color: rgba(255, 255, 255, 0.9); }
.pt-bottom-rights { color: rgba(255, 255, 255, 0.78); }
.pt-bottom a:hover,
.pt-bottom a:focus-visible { color: var(--cc-gold-300, #e3c77f); }
/* The trust row and the payment strip sit on the same navy. */
.pt-feat-item,
.pt-feat-item b,
.pt-feat-item span,
.pt-pay-row,
.pt-pay-row span { color: rgba(255, 255, 255, 0.94); }

/* The copy buttons sit on a PALE pill, not on the navy, so the blanket white above
   turned their labels white on white. They keep the dark ink they had. The 6pt size
   is his mother's own instruction from 2026-09-03 and is left alone. */
.pt-footer .pt-pay-copy,
.pt-footer .pt-pay-copy span,
.pt-footer .pt-pay-copy .pt-pay-copy-label,
.pt-footer .pt-addr-copy,
.pt-footer .pt-addr-copy span,
.pt-footer button.pt-pay-copy,
.pt-footer button.pt-addr-copy { color: var(--cc-primary-800, #14395f); }
.pt-footer .pt-pay-copy svg,
.pt-footer .pt-addr-copy svg { stroke: var(--cc-primary-800, #14395f); }
.pt-footer .pt-pay-copy.is-flashed,
.pt-footer .pt-pay-copy.is-flashed span,
.pt-footer .pt-addr-copy.is-flashed,
.pt-footer .pt-addr-copy.is-flashed span { color: #fff; }

/* Second contrast pass, measured off the rendered page rather than guessed at, because
   the first pass raised the obvious white lines and left the secondary ones behind.
   Sampled at the ink core against the footer navy #0b4f71:

     ZH address line       7.78:1   fine
     EN address line       5.52:1   dim
     EN hours line         5.45:1   dim
     FLAGSHIP tag          5.32:1   dim
     一般查詢 sub-line      4.72:1   dimmest, inline opacity, raised in part-04.php

   Howard, 2026-09-14: "all of the footer actually needs greater contrast". AA was
   already met, so this is not a compliance fix; it is that the English half of every
   bilingual pair was rendering a step behind the Chinese half and reading as an
   afterthought. These bring the English lines to the same weight as the Chinese ones. */
.pt-footer .pt-addr-line.en,
.pt-footer .pt-addr-line.en.pt-addr-hours,
.pt-brand-address .pt-addr-line.en { color: rgba(255, 255, 255, 0.9); }
.pt-footer .pt-bi-en { color: inherit; }
.pt-footer .pt-footer-list .is-flagship .pt-flagship-tag,
.pt-footer .cc-footer-tag { color: #f0d9a0; }

/* HOVER STATES, measured. Howard, 2026-09-14: "all the buttons still need to have enough
   contrast when hovered upon".

   Every :hover rule in this file that sets both a background and a colour was checked.
   35 of 37 clear AA. The two that did not are both WhatsApp buttons, which is the worst
   possible pair to have failing because WhatsApp is the main way an enquiry arrives:

     .pt-floater-wa:hover    white on #1ebe5b   2.45:1
     .cc-whatsapp-btn:hover  #1ea54d on #f0faf3 3.01:1

   The hover was LIGHTER than the resting state in both, so the button faded under the
   cursor exactly when the visitor was committing to it. Darkened instead. WhatsApp green
   is kept as the resting colour, so the button still reads as WhatsApp; only the hover
   moves, and it now moves in the direction the interaction implies. */
.pt-floater-wa:hover,
.pt-floater-wa:focus-visible {
  background: #0f7a38;            /* white on this: 5.44:1 */
  color: #ffffff;
}
.cc-whatsapp-btn:hover,
.cc-whatsapp-btn:focus-visible {
  background: #f0faf3;
  color: #136a32;                 /* on #f0faf3: 6.27:1 */
  border-color: #136a32;
}
.cc-whatsapp-btn:hover svg,
.pt-floater-wa:hover svg { stroke: currentColor; }

/* A visible focus ring on every interactive control, for keyboard and for the
   high-contrast case. Hover is a mouse affordance and does nothing for a keyboard user,
   so "enough contrast when hovered" is only half the requirement. */
.cc-whatsapp-btn:focus-visible,
.pt-floater-wa:focus-visible,
.pt-cta-btn:focus-visible,
.pt-qf-btn:focus-visible,
.cc-btn-primary:focus-visible,
.cc-enquiry-btn:focus-visible,
a.cc-store-map-dir:focus-visible {
  outline: 3px solid #e9cf8c;
  outline-offset: 2px;
}

/* THE SUBCATEGORY DESCRIPTION. His mother has asked four times and he has now asked
   twice more, the last with a screenshot of /product-category/commemorative-gift/ showing
   cards that are photograph and nothing else.
   
   MEASURED ON THE LIVE ELEMENT, which is what the note at .cc-usecard-tx said to do and
   what three previous attempts skipped. CSS.matchedRules against the real card:

     .cc-landing .cc-usecard        display: block; aspect-ratio: 4 / 3; overflow: hidden
     .cc-landing .cc-usecard-media  position: absolute; inset: 0

   The card is a 4:3 box, the photograph is absolutely positioned across the whole of it,
   and the text strip is 107px of content in a container with no room for it and
   overflow: hidden. So it renders and is immediately clipped. Every earlier check passed
   because every earlier check was right: the term has a description, the HTML carries it,
   the DOM carries it, the stylesheet carries it, the colour is not white. It is a box,
   exactly as that note predicted.

   Why it looks like a half-finished change, because it is one. On 2026-09-07 his mother
   asked for "the text to be below the photo not on the photo". .cc-usecard-tx was moved
   from absolute to static that day, which is the text half. The card and the media were
   left in the overlay geometry they needed when the text sat ON the image, and a static
   text block cannot appear below a photograph that fills the entire card.

   The fix finishes that change: the card sizes to its content, and the photograph keeps
   its 4:3 shape in normal flow instead of covering the card. */
.cc-landing .cc-usecard {
  aspect-ratio: auto;
  height: auto;
  display: flex;
  flex-direction: column;
}
.cc-landing .cc-usecard-media {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  flex: none;
  width: 100%;
}
.cc-landing .cc-usecard-tx {
  position: static;
  flex: 1 1 auto;
}

/* ============================================================
   2026-09-14 - banner 5% narrower, copy and card row squared to it
   Owner: "the banner shd be shrank 5%, and the text and the category cards shd be
   horizontally compressed to match the banner's width".

   Three elements decided the old geometry and they disagreed with each other:
   .cc-hero-swiper and .pt-hero-banner-img both capped at a hard 1600px, while
   .cc-homecats-inner (inline in inc/part-02.php) capped at 1720px. That 120px
   difference is what he is looking at in the screenshot.

   All three now read --cc-banner-max. The full-viewport breakout above stays, because
   the Elementor section around the hero carries its own max-width and a child cannot
   widen a narrower parent, so the section still escapes to 100vw and only the picture
   inside it is capped. Verified with scripts/measure.py, not by reading this back.
   ============================================================ */
.cc-hero-swiper,
.pt-hero-banner-img {
  max-width: var(--cc-banner-max, 1520px);
  margin-inline: auto;
}
@media (min-width: 701px) {
  .pt-hero-banner .pt-hero-banner-img {
    max-width: var(--cc-banner-max, 1520px) !important;
  }
}
/* The copy block and the card row share the banner's frame exactly at desktop, and
   keep a 20px breathing edge once the viewport is narrower than the banner cap, where
   the banner is full bleed and there is no line left to sit on. */
.cc-homecats-inner {
  max-width: min(var(--cc-banner-max, 1520px), calc(100vw - 40px)) !important;
  margin-inline: auto !important;
}

/* ============================================================
   2026-09-14 - three defects he photographed, in one pass
   ============================================================ */

/* 1. "the word 'medal' is cropped out and showing on the photo that shdnt happen"
   The category covers carry their own name burned into the artwork, bottom left, in both
   languages (verified on cover-336, 1254x1254: 襟章及金屬徽章 / Lapel Pins & Metal Badges).
   The card then forced that square picture into a 4:3 box with object-fit cover, so the
   bottom quarter was thrown away and the name was sliced through the middle, which is the
   half 獎牌 sitting on the medals photo.
   The artwork is not the thing to change: his mother reviewed and approved these covers on
   2026-09-10, labels included. The crop is the thing to change. Every frame that holds a
   generated cover is square again, so nothing is cut. */
.cc-shopcat-media,
.cc-shopcat.is-flagship .cc-shopcat-media,
.cc-usecard--cover .cc-usecard-media,
.cc-landing .cc-usecard--cover .cc-usecard-media {
  aspect-ratio: 1 / 1 !important;
}
.cc-shopcat-img,
.cc-usecard--cover .cc-usecard-media img {
  object-fit: contain !important;
  background: #fff;
}

/* 2. "the racingtheplanet went out of the grid"
   客戶案例_009 · RacingThePlanet 亞克力獎座. CJK breaks anywhere, so every other title in
   that grid fits; RacingThePlanet is a fifteen character Latin token with no break
   opportunity in it, so the line could not wrap and ran out through the side of the card.
   Any brand name a customer gives us can do this, so the rule is on the title, not on
   this one product. */
.woocommerce-loop-product__title,
.cc-loop-sku,
.cc-case-tx,
.cc-shopcat-ttl,
.cc-usecard-zh,
.cc-usecard-en {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 3. "the product pages and the pages showing the subcat increase the width of the
   widgets by 5%". Measured first with scripts/measure.py: .cc-arch was 1404.8 wide at a
   1920 viewport, inset 257.6 each side. The inset that actually scales with the viewport
   is --cc-gutter, so the widening is expressed against it rather than as a fixed pixel
   figure, and it holds its proportion on a laptop as well as on a monitor.

   .cc-arch-main is deliberately NOT in this selector. It was, for one deploy, and the
   product grid inside got NARROWER (ul.products 1136.8 -> 1027) while the frame around it
   got wider, because the same inset was then applied a second time on the inner column.
   Widen the frame only; the column inside is flex:1 and takes the gain by itself. */
@media (min-width: 881px) {
  .cc-arch,
  .single-product .cc-arch {
    margin-inline: calc(var(--cc-gutter) * 0.72) !important;
  }
}

/* 2026-09-15 - "remove the duplicate title on the shop cards"
   The cover artwork already names the range in both languages. The card's own heading and
   English line are kept in the document for the crawler and for a screen reader, since text
   inside a photograph is invisible to both, and taken off the screen. The count keeps its
   place because nothing in the artwork carries it. */
.cc-shopcat-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cc-shopcat-sub {
  display: flex;
  align-items: center;
}

/* ============================================================
   2026-09-15 - every page except the homepage is 5 per cent wider
   Owner: "except the homepage, every page extend the horizontal width by 5%".

   Every content frame on this site is inset by --cc-gutter, so widening the content is the
   same thing as narrowing that inset. Measured on a product page at a 1920 viewport before
   touching anything: .product was 1654.4 wide, inset 132.8 each side. Five per cent of
   1654.4 is 82.7, which is 41.4 off each side, so the gutter has to come down from 124.8 to
   about 83, and 83 / 124.8 is 0.665.

   The homepage keeps the full gutter because he excluded it by name, and because its hero
   and card row were squared to the banner yesterday and widening one without the other
   would pull them apart again.

   THE GUTTER IS NOW TWO VARIABLES and that is deliberate. --cc-gutter-base is the clamp,
   --cc-gutter is what the frames actually use. Anything that wants a fraction of the
   ORIGINAL inset reads the base, so it cannot compound with this rule: .cc-arch was already
   widened 5 per cent on 2026-09-14 with a 0.72 multiplier, and multiplying that by 0.665
   again would have made the archive 10 per cent wider than he asked for.
   ============================================================ */
:root {
  --cc-gutter-base: clamp(20px, 6.5vw, 170px);
}
body:not(.home) {
  --cc-gutter: calc(var(--cc-gutter-base) * 0.665);
}
@media (max-width: 700px) {
  :root {
    --cc-gutter-base: clamp(12px, 5vw, 28px);
  }
  /* On a phone the gutter is already only 12 to 28px and it is the only thing keeping text
     off the bezel, so the 5 per cent comes out of nothing worth taking. Frames stay as they
     are below 700px. */
  body:not(.home) {
    --cc-gutter: var(--cc-gutter-base);
  }
}
/* .cc-arch keeps the widening it was given on 2026-09-14, measured against the BASE inset so
   this rule and that one cannot multiply together. */
@media (min-width: 881px) {
  .cc-arch,
  .single-product .cc-arch {
    margin-inline: calc(var(--cc-gutter-base) * 0.72) !important;
  }
}

/* ============================================================
   2026-09-15 - phone sized tap targets on the top utility bar
   The browser sweep measured the bare "WhatsApp" link in the top bar at 100 by 26 at a
   390px viewport. Apple and Google both publish 44px as the smallest reliable target, and
   this link sits next to the phone number as one of the two ways a visitor contacts the
   shop from a phone, so it is a target worth hitting. min-height only: nothing about the
   bar's layout or the desktop rendering changes.
   ============================================================ */
@media (max-width: 700px) {
  .pt-topbar a,
  .pt-hdr-topbar a,
  a[href^="tel:"],
  a[href*="wa.me"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 訂購流程, rebuilt from 媽媽's 2026-09-16 mockup ────────────────
   Her design is a banner strip, four numbered steps with a photograph each, three fact
   cards and an eight question FAQ. Built as real markup rather than her picture pasted in,
   so the text is selectable, translatable, indexable and reflows on a phone. */
.op-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) 1.35fr;
  align-items: stretch;
  background: linear-gradient(115deg, #eef4f9 0%, #dfeaf4 55%, #cfdfee 100%);
}
.op-hero-copy { padding: 48px clamp(20px, 4vw, 64px); align-self: center; }
.op-hero-h1 {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.28;
  color: var(--cc-logo-blue-deep, #15305a);
  margin: 0;
}
.op-hero-eyebrow {
  margin: 10px 0 14px;
  color: #a8873f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.34em;
}
.op-hero-sub {
  font-family: var(--cc-font-serif-tc);
  font-size: clamp(16px, 1.5vw, 22px);
  color: #20364f;
  margin: 0 0 8px;
  font-weight: 600;
}
.op-hero-kicker { font-size: 14px; color: #5d6b7c; margin: 0; letter-spacing: 0.04em; }
.op-hero-strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.op-hero-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The chevrons between the panels, drawn rather than shipped as four more images. */
.op-hero-strip img + img { border-left: 2px solid rgba(255, 255, 255, 0.85); }
.op-hero-script {
  position: absolute;
  right: 18px;
  top: 14px;
  max-width: 44%;
  text-align: right;
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 17px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  line-height: 1.5;
}

.op-steps-wrap { max-width: 1240px; margin: 0 auto; padding: 44px 20px 8px; }
.op-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.op-step { position: relative; }
.op-step + .op-step::before {
  content: "›";
  position: absolute;
  left: -19px;
  top: 34px;
  font-size: 30px;
  color: #b9c6d4;
  line-height: 1;
}
/* The number sits OVER the photograph, not beside it. As a flex sibling the image had no
   width to resolve against and blew up to several hundred pixels tall, pushing the badge to
   the bottom of the card. Absolute positioning takes the image out of that argument. */
.op-step-top { position: relative; padding-left: 26px; }
.op-step-no {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cc-logo-blue-deep, #15305a);
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
}
.op-step:nth-child(2) .op-step-no { background: #a8873f; }
/* An explicit height, with !important, because the theme ships img{height:auto} and that
   beats aspect-ratio: the photographs rendered at their intrinsic 821px and each step card
   was taller than the viewport. */
.op-step-img {
  display: block;
  width: 100%;
  height: clamp(148px, 14vw, 196px) !important;
  object-fit: cover;
  border-radius: 30px;
  background: #eef1f4;
}
.op-step-zh { font-size: 18px; font-weight: 700; color: var(--cc-logo-blue-deep, #15305a); margin: 16px 0 2px; }
.op-step-en { font-size: 13px; color: #8d99a6; margin: 0 0 10px; letter-spacing: 0.02em; }
.op-step-desc { font-size: 14px; line-height: 1.75; color: #4b5666; margin: 0; }

.op-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 34px 0 8px; }
.op-fact {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f4f7fa;
  border: 1px solid #e4ebf2;
  border-radius: 10px;
  padding: 20px 22px;
}
.op-fact-icon { flex: 0 0 auto; width: 34px; height: 34px; color: var(--cc-logo-blue-deep, #15305a); }
.op-fact-h { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--cc-logo-blue-deep, #15305a); }
.op-fact-p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #4b5666; }

.op-faq-wrap { max-width: 1240px; margin: 0 auto; padding: 30px 20px 54px; }
.op-faq-h {
  font-family: var(--cc-font-serif-tc);
  font-size: 24px;
  color: var(--cc-logo-blue-deep, #15305a);
  margin: 0 0 18px;
}
.op-faq-h-en { font-size: 14px; color: #9aa6b2; margin-left: 12px; letter-spacing: 0.22em; }
.op-faq-grid { display: grid; grid-template-columns: 1.9fr 0.85fr; gap: 26px; align-items: start; }
.op-faq-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.op-faq {
  border: 1px solid #e4ebf2;
  border-radius: 8px;
  background: #fff;
  padding: 0 16px;
}
.op-faq-q {
  cursor: pointer;
  list-style: none;
  padding: 14px 24px 14px 0;
  font-size: 14.5px;
  color: #25313f;
  position: relative;
}
.op-faq-q::-webkit-details-marker { display: none; }
.op-faq-q::after { content: "+"; position: absolute; right: 2px; top: 11px; font-size: 20px; color: #9aa6b2; }
.op-faq[open] .op-faq-q::after { content: "\2212"; }
.op-faq-n { color: #8d99a6; margin-right: 7px; }
.op-faq-a { padding: 0 0 15px; font-size: 13.5px; line-height: 1.8; color: #4b5666; }
.op-help { background: #f4f7fa; border: 1px solid #e4ebf2; border-radius: 10px; padding: 24px; text-align: center; }
.op-help-icon { width: 40px; height: 40px; color: #a8873f; }
.op-help-h { margin: 12px 0 18px; font-size: 14.5px; line-height: 1.8; color: #25313f; }
.op-help-row { display: grid; gap: 10px; }
.op-help-wa, .op-help-mail {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: #fff !important;
}
.op-help-wa { background: #25a35a; }
.op-help-mail { background: var(--cc-logo-blue-deep, #15305a); }

@media (max-width: 1080px) {
  .op-hero { grid-template-columns: 1fr; }
  .op-hero-strip { grid-template-columns: repeat(4, 1fr); min-height: 190px; }
  .op-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 34px; }
  .op-step + .op-step::before { display: none; }
  .op-facts { grid-template-columns: 1fr; }
  .op-faq-grid { grid-template-columns: 1fr; }
  .op-faq-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .op-steps { grid-template-columns: 1fr; }
  .op-hero-strip { grid-template-columns: repeat(2, 1fr); }
  .op-hero-script { position: static; display: block; max-width: none; text-align: center; color: #20364f; text-shadow: none; padding: 10px 16px 0; }
}

/* 媽媽's About layout, 2026-09-16 ("上面是關於我們"): her composite panel on the left, the
   story on the right, with the four marks under it. Replaces the old two paragraph story
   block, whose image was a product banner rather than the shop. */
.ab-story {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.ab-story-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(13, 44, 77, 0.14);
}
.ab-story-h {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.45;
  color: #14395f;
  margin: 14px 0 6px;
}
.ab-story-en {
  font-family: var(--cc-font-display);
  font-style: italic;
  color: var(--cc-ink-400, #6b7280);
  margin: 0 0 20px;
}
.ab-story-text p {
  line-height: 1.9;
}
.ab-story-close {
  color: #14395f;
  font-weight: 600;
}
.ab-marks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid var(--cc-border-soft, #e7e3da);
  padding-top: 20px;
}
.ab-marks li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ab-mark-zh {
  font-weight: 600;
  color: #14395f;
  font-size: 15px;
}
.ab-mark-en {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cc-ink-400, #6b7280);
}
@media (max-width: 900px) {
  .ab-story {
    grid-template-columns: 1fr;
  }
  .ab-marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Email enquiry button on the PDP, 2026-09-16. Matches the WhatsApp button's shape so the
   two read as one row of contact choices, in the house navy rather than WhatsApp green. */
.cc-email-btn {
  background: #fff !important;
  color: #14395f !important;
  border: 1px solid #c8d6e2 !important;
  margin-top: 14px !important;
  position: relative;
  padding-left: 42px !important;
}
.cc-email-btn::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: #14395f;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>")
    center / contain no-repeat;
}
.cc-email-btn:hover {
  background: #f2f6fa !important;
  border-color: #14395f !important;
  color: #14395f !important;
}
.cc-pdp-cta-mail {
  display: inline-block;
}

/* Footer payment row: the six chips are statements, the one link is the link. */
span.pt-procurement-item { cursor: default; }
.pt-procurement-more {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}