/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 18:4 Unexpected "\"@context\""
Line 20:13 Unexpected "{"
Line 20:22 Expected ":"
Line 20:38 Unexpected ","
Line 21:5 Expected identifier but found "%"
Line 22:4 Unexpected "\"primaryImageOfPage\""
Line 23:6 Unexpected "\"@type\""
Line 24:14 Unexpected "{"
Line 24:23 Expected ":"
... and 365 more hidden warnings

**/
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "ItemPage",
    "name": {{ product.title | json }},
    {%- if product.featured_image -%}
    "primaryImageOfPage": {
      "@type": "ImageObject",
      "url": {{ product.featured_image | image_url: width: 1200 | prepend: "https:" | json }}
    },
    {%- endif -%}
    "description": {{ product.description | strip_html | truncate: 300 | json }},
    "url": {{ request.origin | append: product.url | json }},
    "isPartOf": {
      "@type": "WebSite",
      "name": {{ shop.name | json }},
      "url": {{ request.origin | json }}
    }
  }
  </script>
{%- assign is_oral = false -%}
{%- assign is_groom = false -%}
{%- assign is_hair = false -%}
{%- for t in product.tags -%}
  {%- if t == 'oral-care' -%}{%- assign is_oral = true -%}
  {%- elsif t == 'grooming-hair-removal' -%}{%- assign is_groom = true -%}
  {%- elsif t == 'hair-styling' -%}{%- assign is_hair = true -%}
  {%- endif -%}
{%- endfor -%}
{%- if is_oral -%}
  {%- assign line_eyebrow = 'Oral Care &middot; OEM &amp; ODM' -%}
  {%- assign line_collection = 'oral-care' -%}
{%- elsif is_groom -%}
  {%- assign line_eyebrow = 'Grooming &amp; Hair Removal &middot; Partner-Manufactured, RYVO-Managed' -%}
  {%- assign line_collection = 'grooming-hair-removal' -%}
{%- elsif is_hair -%}
  {%- assign line_eyebrow = 'Hair Styling &middot; Partner-Manufactured, RYVO-Managed' -%}
  {%- assign line_collection = 'hair-styling' -%}
{%- else -%}
  {%- assign line_eyebrow = 'Personal Care Devices &middot; OEM &amp; ODM' -%}
  {%- assign line_collection = '' -%}
{%- endif -%}
{%- assign model = product.metafields.ryvo.model | strip -%}
{%- assign blurb = product.metafields.ryvo.blurb | strip -%}
{%- assign certs = product.metafields.ryvo.certs | strip -%}
{%- assign specs_html = product.metafields.ryvo.specs_html | strip -%}
{%- assign oem_html = product.metafields.ryvo.oem_html | strip -%}
{%- assign pack_html = product.metafields.ryvo.pack_html | strip -%}
{%- assign certs_html = product.metafields.ryvo.certs_html | strip -%}
{%- assign lead_html = product.metafields.ryvo.lead_html | strip -%}
{%- assign qc_html = product.metafields.ryvo.qc_html | strip -%}
{%- assign faq_html = product.metafields.ryvo.faq_html | strip -%}
{%- capture oem_fallback -%}
  <ul class="rv-cust">
    {%- if is_oral -%}
      <li>Logo, colors and surface finish</li>
      <li>Brush head configuration and bristle options</li>
      <li>Modes, timer behavior and battery configuration</li>
      <li>Packaging, manual and retail accessories</li>
      <li>Plug and voltage for your target market</li>
    {%- elsif is_groom -%}
      <li>Logo, colors and surface finish</li>
      <li>Blade or foil system and motor options</li>
      <li>Battery, runtime and charging configuration</li>
      <li>Wet/dry and waterproofing specification</li>
      <li>Packaging, manual and retail accessories</li>
    {%- elsif is_hair -%}
      <li>Logo, colors and surface finish</li>
      <li>Motor, heat and airflow control settings</li>
      <li>Barrel and attachment options</li>
      <li>Thermal safety configuration</li>
      <li>Packaging, manual and retail accessories</li>
    {%- else -%}
      <li>Logo, colors and surface finish</li>
      <li>Function and performance options</li>
      <li>Battery and charging configuration</li>
      <li>Packaging, manual and retail accessories</li>
    {%- endif -%}
  </ul>
  <p class="rv-note" style="margin-top:10px">Every configuration is confirmed in your written quotation and locked after sample approval.</p>
{%- endcapture -%}
{%- assign line_coll = collections[line_collection] -%}

<div class="rv-wrap">
  <nav class="rv-crumb" aria-label="Breadcrumb">
    <a href="/">Home</a> <span>/</span>
    {%- if line_coll != blank -%}<a href="{{ line_coll.url }}">{{ line_coll.title }}</a> <span>/</span>{%- endif -%}
    <span aria-current="page">{{ product.title | escape }}</span>
  </nav>

  <div class="rv-pgrid">
    <div class="rv-media">
      <div class="rv-gal" aria-label="Product images">
        {%- for image in product.images -%}
          {%- assign has_more = false -%}
          {%- if forloop.index == 4 and product.images.size > 4 -%}{%- assign has_more = true -%}{%- endif -%}
          <button type="button" class="rv-gal-it{% if has_more %} rv-gal-it--more{% endif %}"
                  data-i="{{ forloop.index0 }}"
                  data-src="{{ image | image_url: width: 1400 }}"
                  data-lb-src="{{ image | image_url: width: 2000 }}"
                  aria-label="{% if has_more %}Show all {{ product.images.size }} photos{% else %}Open image {{ forloop.index }} of {{ product.images.size }} in full screen{% endif %}">
            <img src="{{ image | image_url: width: 900 }}"
                 srcset="{{ image | image_url: width: 400 }} 400w, {{ image | image_url: width: 600 }} 600w, {{ image | image_url: width: 900 }} 900w, {{ image | image_url: width: 1400 }} 1400w"
                 sizes="(max-width:1023px) 84vw, 395px"
                 alt="{{ image.alt | default: product.title | escape }}"
                 width="900" height="900"
                 loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"{% if forloop.first %} fetchpriority="high"{% endif %}>
            {%- if has_more -%}
              <span class="rv-gal-more" aria-hidden="true">Show all {{ product.images.size }} photos</span>
            {%- endif -%}
          </button>
        {%- endfor -%}
        {%- if product.images.size == 0 -%}
          <span class="rv-gal-ph">Image available on request</span>
        {%- endif -%}
      </div>
    </div>

    <div class="rv-info">
      <p class="rv-eyebrow">{{ line_eyebrow }}</p>
      <h1>{{ product.title }}</h1>
      <p class="rv-role">{{ product.metafields.ryvo.role | default: 'OEM &amp; Private Label Solution' }}</p>
      {%- if model != blank -%}<p class="rv-model">Model: <b>{{ model }}</b></p>{%- endif -%}
      {%- if blurb != blank -%}<p class="rv-blurb">{{ blurb }}</p>{%- endif -%}
      {%- assign chip_raw = product.metafields.ryvo.chips | strip -%}
      {%- assign chip_list = chip_raw | split: ',' -%}
      {%- if chip_raw != blank -%}
        <ul class="rv-featgrid">
          {%- for chip in chip_list -%}
            {%- assign c = chip | strip -%}
            {%- if c != blank -%}<li><span class="rv-featicon"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span><span>{{ c }}</span></li>{%- endif -%}
          {%- endfor -%}
        </ul>
      {%- endif -%}
      <div class="rv-qrow">
        <a class="rv-btn rv-btn-primary" href="/pages/request-a-quote?product={{ product.title | url_encode }}">Request a Quote</a>
        <a class="rv-btn rv-btn-line" href="/pages/request-a-quote?product={{ product.title | url_encode }}&amp;type=sample">Request a Sample</a>
        {%- assign rv_spec = product.handle | prepend: 'ryvo-spec-' | append: '.pdf' -%}
        {%- if product.metafields.ryvo.moq != blank -%}
        <a class="rv-btn rv-btn-quiet" href="{{ rv_spec | asset_url }}" download>Download Specification (PDF)</a>
        {%- else -%}
        <a class="rv-btn rv-btn-quiet" href="/pages/request-a-quote?product={{ product.title | url_encode }}&amp;type=spec">Request Specification</a>
        {%- endif -%}
      </div>
      <div class="rv-pinfo">
        <h2 class="rv-pinfo-h">Product Information</h2>
        <table class="rv-pinfo-t"><tbody>
          <tr><th>Model</th><td>{{ model | default: 'Contact for details' }}</td></tr>
          <tr><th>Application</th><td>{{ product.metafields.ryvo.application | default: product.type | default: 'Contact for details' }}</td></tr>
          <tr><th>MOQ</th><td>500&ndash;1,000 pcs</td></tr>
          <tr><th>Customization</th><td>OEM / ODM</td></tr>
          <tr><th>Sample</th><td>7&ndash;15 days</td></tr>
          <tr><th>Certification</th><td>CE / RoHS / FCC depending on model</td></tr>
          <tr><th>Lead time</th><td>30&ndash;45 days</td></tr>
        </tbody></table>
        <h2 class="rv-pinfo-h rv-pinfo-h2">OEM Customization Options</h2>
        <ul class="rv-oem-opts">
          <li>Logo customization</li>
          <li>Color customization</li>
          <li>Packaging design</li>
          <li>User manual</li>
          <li>Accessory configuration</li>
        </ul>
{%- if oem_html != blank or certs_html != blank or lead_html != blank -%}
        <div class="rv-pinfo-note">
          {%- if oem_html != blank -%}{{ oem_html }}{%- endif -%}
          {%- if certs_html != blank -%}{{ certs_html }}{%- endif -%}
          {%- if lead_html != blank -%}{{ lead_html }}{%- endif -%}
        </div>
        {%- endif -%}
      </div>
      <p class="rv-note" style="margin:16px 0 0">Specification, certification and pricing are confirmed with your quotation.</p>
    </div>
  </div>
</div>

      <div class="rv-target">
        <h2 class="rv-pinfo-h">Target Customers</h2>
        <p class="rv-target-lead">Designed for:</p>
        {%- if product.metafields.ryvo.target != blank -%}
          <ul class="rv-target-list">{{ product.metafields.ryvo.target | split: '|' | join: '</li><li>' | prepend: '<li>' | append: '</li>' }}</ul>
        {%- else -%}
          <ul class="rv-target-list">
            <li>Private label brands</li>
            <li>Retailers and distributors</li>
            <li>Amazon sellers</li>
            <li>Consumer electronics companies</li>
            <li>Emerging personal care brands</li>
          </ul>
        {%- endif -%}
      </div>

      <div class="rv-why4">
        <h2 class="rv-pinfo-h">Why Work With RYVO?</h2>
        <div class="rv-why4-grid">
          <div class="rv-why-card"><h3>Product Development Experience</h3><p>Experience in consumer electronics and personal care product development from concept to production.</p></div>
          <div class="rv-why-card"><h3>Chinese Manufacturing Network</h3><p>Access to experienced manufacturing partners across China's consumer electronics supply chain.</p></div>
          <div class="rv-why-card"><h3>Engineering-Based Verification</h3><p>We evaluate products beyond specifications, focusing on components, structure and real performance.</p></div>
          <div class="rv-why-card"><h3>One Partner From Concept To Mass Production</h3><p>Support from product definition, customization and supplier coordination to final production.</p></div>
        </div>
      </div>

<div class="rv-trustband">
  <div class="rv-wrap rv-trustrow">
    {%- if is_oral -%}
         <div class="rv-trust-it"><b>Manufacturing Partner Network</b><span>Production, tooling and QC coordinated end to end</span></div>
       {%- else -%}
         <div class="rv-trust-it"><b>Manufacturing Partner Network</b><span>Produced by audited partner factories, with specification, sample approval and QC coordinated by RYVO</span></div>
       {%- endif -%}
    <div class="rv-trust-it"><b>Configuration Support</b><span>Logo, color, function and packaging tailored to your brand</span></div>
    <div class="rv-trust-it"><b>Pre-Production Verification</b><span>Sample approval and QC checks before mass production</span></div>
  </div>
</div>

<div class="rv-wrap">
  <div class="rv-wrap rv-insight">
  <div class="rv-insight-in">
    <div class="rv-insight-body">
      <p class="rv-eyebrow">Engineering Insight</p>
      <h2>Why This Product?</h2>
      <p>Beyond specifications, RYVO evaluates:</p>
      <ul class="rv-check2">
        <li>Motor configuration</li>
        <li>Battery design</li>
        <li>Electronic structure</li>
        <li>Product reliability</li>
        <li>Manufacturing feasibility</li>
      </ul>
      <p class="rv-insight-cta"><a class="rv-btn rv-btn-line" href="/pages/product-intelligence">See How We Analyze Products</a></p>
    </div>
    {%- assign tz = product.metafields.ryvo.teardown_img | strip -%}
    {%- if tz != blank -%}
      <div class="rv-insight-media"><img src="{{ tz }}" alt="{{ product.title | escape }} teardown: internal structure and components" width="1200" height="900" loading="lazy" decoding="async"></div>
    {%- endif -%}
  </div>
</div>

<div class="rv-specband">
    {%- if specs_html != blank or product.description != blank -%}
      <details class="rv-acc" open>
        <summary>Product Specifications</summary>
        <div class="rv-acc-body">{{ specs_html | default: product.description }}</div>
      </details>
    {%- endif -%}
    {%- if pack_html != blank -%}
      <details class="rv-acc">
        <summary>Packaging &amp; Delivery</summary>
        <div class="rv-acc-body">{{ pack_html }}</div>
      </details>
    {%- endif -%}
    {%- assign oem_content = oem_html | default: oem_fallback -%}
    {%- if certs_html != blank -%}
    {%- endif -%}
    {%- if lead_html != blank -%}
    {%- endif -%}
    <details class="rv-specd"><summary>Quality &amp; Verification</summary><div class="rv-specd-b"><p>RYVO supports product verification before mass production, including specification review, component evaluation and quality requirements confirmation.</p></div></details>
    {%- assign faq_content = faq_html -%}
    {%- if faq_content == blank -%}
      {%- capture faq_content -%}
        <p><b>What is the minimum order quantity?</b><br>MOQ is 500&ndash;1,000 pcs for standard programs, depending on model and colour configuration. Tell us which models you are evaluating and we will confirm the MOQ for each one.</p>
        <p><b>Can I order a sample before committing to production?</b><br>Yes. Samples are available for evaluation. Sample lead time is 7&ndash;15 days from artwork confirmation; sample cost is confirmed per model and destination.</p>
        <p><b>What can be customized?</b><br>Logo, colour, surface finish, function set, retail packaging, manuals, and plug and voltage configuration for your market. Accessory and gift-set configuration is reviewed per project.</p>
        <p><b>How long does production take?</b><br>Production lead time is confirmed with your quotation, because it depends on order volume, customization scope and the production schedule at the time of order.</p>
        <p><b>Which certifications apply?</b><br>Certification requirements differ by market. Share your destination market and we will confirm which documents the factory can provide for that model.</p>
        <p><b>How is the order shipped?</b><br>Shipping is quoted for your destination. We can arrange express or sea freight through our forwarders, or work with the forwarder you already use.</p>
      {%- endcapture -%}
    {%- endif -%}
    <details class="rv-acc">
      <summary>Frequently Asked Questions</summary>
      <div class="rv-acc-body">{{ faq_content }}</div>
    </details>
  </div>

  {%- if line_coll != blank -%}
    {%- assign others = '' -%}
    {%- for p in line_coll.products limit: 8 -%}
      {%- if p.handle != product.handle -%}
        {%- assign others = others | append: p.handle | append: ',' -%}
      {%- endif -%}
    {%- endfor -%}
    {%- if others != '' -%}
      <div class="rv-rel">
        <div class="rv-rel-head">
          <div>
      <p class="rv-eyebrow">Same product line</p>
            <h2 class="rv-title" style="margin:2px 0 0">Compare Similar Models</h2>
          </div>
          <a class="rv-btn rv-btn-line" href="{{ line_coll.url }}">View All {{ line_coll.title }}</a>
        </div>
        <div class="rv-relrow">
          {%- assign rel_shown = 0 -%}
          {%- for p in line_coll.products limit: 8 -%}
            {%- if p.handle != product.handle and rel_shown < 4 -%}
              {%- assign rel_shown = rel_shown | plus: 1 -%}
              <a class="rv-relcard" href="{{ p.url }}">
                <span class="rv-relcard-img{% if p.images.size > 1 %} rv-relcard-img--swap{% endif %}">
                  {%- if p.featured_image -%}
                    <img src="{{ p.featured_image | image_url: width: 500 }}" alt="{{ p.title | escape }}" width="500" height="500" loading="lazy">
                    {%- if p.images.size > 1 -%}
                      <img class="rv-rel-img2" src="{{ p.images[1] | image_url: width: 500 }}" alt="" width="500" height="500" loading="lazy" aria-hidden="true">
                    {%- endif -%}
                  {%- endif -%}
                </span>
                <b>{{ p.title }}</b>
                {%- assign pc = p.metafields.ryvo.chips | strip | split: ',' -%}
                {%- if pc.size > 0 -%}<span>{{ pc[0] | strip }}{%- if pc.size > 1 %} &middot; {{ pc[1] | strip }}{%- endif -%}</span>{%- endif -%}
                <em>View Details</em>
              </a>
            {%- endif -%}
          {%- endfor -%}
        </div>
      </div>
    {%- endif -%}
  {%- endif -%}
</div>

      <div class="rv-wrap rv-bottomcta">
        <div class="rv-bottomcta-in">
          <div>
            <h3>Request a Quote for This Product</h3>
            <p>Tell us the model, customization you need and expected volume &mdash; we will come back with pricing and lead time.</p>
          </div>
          <a class="rv-btn rv-btn-solid" href="/pages/request-a-quote">Request Quote</a>
        </div>
      </div>

<div class="rv-stickybar" data-rv-sticky hidden>
  <div class="rv-sticky-in">
    <div class="rv-sticky-meta">
      <b>{{ product.title }}</b>
      {%- if model != blank -%}<span>Model {{ model }}</span>{%- endif -%}
      <span>MOQ {{ product.metafields.ryvo.moq | default: 'on request' }}</span>
      <span class="rv-sticky-hide-sm">Lead time {{ product.metafields.ryvo.prod_lead | default: 'on request' }}</span>
    </div>
    <div class="rv-sticky-actions">
      <a class="rv-btn rv-btn-primary" href="/pages/request-a-quote?product={{ product.title | url_encode }}">Request a Quote</a>
      <a class="rv-btn rv-btn-ghost" href="/pages/request-a-quote?product={{ product.title | url_encode }}&amp;type=sample">Request a Sample</a>
      <button type="button" class="rv-backtop" aria-label="Back to top">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
      </button>
    </div>
  </div>
</div>

<div class="rv-lb" data-rv-lb hidden role="dialog" aria-modal="true" aria-label="Product image viewer">
  <button type="button" class="rv-lb-close" aria-label="Close viewer">&#10005;</button>
  <button type="button" class="rv-lb-nav rv-lb-prev" aria-label="Previous image">&#8249;</button>
  <figure class="rv-lb-stage">
    <img src="" alt="{{ product.title | escape }}">
    <figcaption class="rv-lb-count">1 / 1</figcaption>
  </figure>
  <button type="button" class="rv-lb-nav rv-lb-next" aria-label="Next image">&#8250;</button>
</div>

<script>
(function () {
  var root = document.querySelector('.ryvo-product');
  if (!root) return;
  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var tiles = Array.prototype.slice.call(root.querySelectorAll('.rv-gal-it'));
  var images = tiles.map(function (t) {
    var s = t.getAttribute('data-src');
    return { src: s, lb: t.getAttribute('data-lb-src') || s.replace(/width=\d+/, 'width=2000') };
  });
  var lb = root.querySelector('[data-rv-lb]');
  if (!lb) return;
  var lbImg = lb.querySelector('img');
  var lbCount = lb.querySelector('.rv-lb-count');
  var lbPrev = lb.querySelector('.rv-lb-prev');
  var lbNext = lb.querySelector('.rv-lb-next');
  var lbClose = lb.querySelector('.rv-lb-close');
  var idx = 0;
  var lastFocus = null;

  function openLb(i) {
    if (!images.length) return;
    if (lastFocus === null) { lastFocus = document.activeElement; }
    idx = (i + images.length) % images.length;
    lbImg.src = images[idx].lb;
    lbCount.textContent = (idx + 1) + ' / ' + images.length;
    var many = images.length > 1;
    lbPrev.style.display = many ? 'flex' : 'none';
    lbNext.style.display = many ? 'flex' : 'none';
    lb.hidden = false;
    document.body.classList.add('rv-noscroll');
    if (lbClose.focus) { lbClose.focus(); }
  }
  function closeLb() {
    lb.hidden = true;
    document.body.classList.remove('rv-noscroll');
    if (lastFocus && lastFocus.focus) { lastFocus.focus(); }
    lastFocus = null;
  }

  tiles.forEach(function (t) {
    t.addEventListener('click', function () {
      var n = parseInt(t.getAttribute('data-i') || '0', 10);
      // a tile carrying "Show all" opens at the first image that is not in the grid
      openLb(t.classList.contains('rv-gal-it--more') ? Math.min(4, images.length - 1) : n);
    });
  });

  lbClose.addEventListener('click', closeLb);
  lbPrev.addEventListener('click', function () { openLb(idx - 1); });
  lbNext.addEventListener('click', function () { openLb(idx + 1); });
  lb.addEventListener('click', function (e) { if (e.target === lb) { closeLb(); } });
  document.addEventListener('keydown', function (e) {
    if (lb.hidden) return;
    if (e.key === 'Escape') { closeLb(); }
    else if (e.key === 'ArrowLeft') { openLb(idx - 1); }
    else if (e.key === 'ArrowRight') { openLb(idx + 1); }
    else if (e.key === 'Tab') {
      var items = [lbClose, lbPrev, lbNext].filter(function (el) {
        return el && el.style.display !== 'none' && el.offsetParent !== null;
      });
      if (!items.length) return;
      e.preventDefault();
      var at = items.indexOf(document.activeElement);
      var next = e.shiftKey ? (at <= 0 ? items.length - 1 : at - 1)
                            : (at === -1 || at === items.length - 1 ? 0 : at + 1);
      items[next].focus();
    }
  });
  var tx = null;
  lb.addEventListener('touchstart', function (e) { tx = e.changedTouches[0].clientX; }, { passive: true });
  lb.addEventListener('touchend', function (e) {
    if (tx === null) return;
    var dx = e.changedTouches[0].clientX - tx;
    tx = null;
    if (Math.abs(dx) > 40) { if (dx > 0) { openLb(idx - 1); } else { openLb(idx + 1); } }
  }, { passive: true });

  var sticky = root.querySelector('[data-rv-sticky]');
  var backTop = root.querySelector('.rv-backtop');
  var info = root.querySelector('.rv-info');
  function findScroller() {
    var el = info;
    while (el && el !== document.body && el !== document.documentElement) {
      el = el.parentElement;
      if (!el) break;
      if (el.scrollHeight > el.clientHeight + 4) return el;
    }
    return window;
  }
  var scroller = findScroller();
  function onScroll() {
    if (!sticky || !info) return;
    var r = info.getBoundingClientRect();
    sticky.hidden = r.bottom >= 0;
  }
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function (entries) {
      if (!sticky) return;
      sticky.hidden = entries[0].isIntersecting;
    }, { threshold: 0 });
    io.observe(info);
  }
  scroller.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
  if (backTop) backTop.addEventListener('click', function () {
    var s = findScroller();
    if (s === window) { window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' }); }
    else { s.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' }); }
  });
})();
</script>
{% schema %}
{
  "name": "RYVO — Product page",
  "tag": "section",
  "class": "ryvo ryvo-product",
  "settings": []
}
{% endschema %}


/* ===== Product Page Full Centering & Layout Normalization ===== */
.ryvo.ryvo-product {
  width: 100% !important;
  overflow-x: hidden !important;
}
.ryvo.ryvo-product .rv-wrap {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ryvo.ryvo-product .rv-pgrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
  margin-top: 24px !important;
}
.ryvo.ryvo-product .rv-target {
  width: 100% !important;
  margin: 48px 0 0 !important;
}
.ryvo.ryvo-product .rv-target-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px 24px !important;
  padding: 0 !important;
  list-style: none !important;
}
.ryvo.ryvo-product .rv-why4 {
  width: 100% !important;
  margin: 48px 0 0 !important;
}
.ryvo.ryvo-product .rv-why4-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-top: 16px !important;
}
.ryvo.ryvo-product .rv-trustband {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 56px !important;
  margin-bottom: 56px !important;
  background-color: #0E2A47 !important;
  padding: 24px 0 !important;
}
.ryvo.ryvo-product .rv-insight {
  width: 100% !important;
  margin: 48px 0 !important;
}
.ryvo.ryvo-product .rv-specband {
  width: 100% !important;
  margin: 48px 0 !important;
}
.ryvo.ryvo-product .rv-bottomcta {
  width: 100% !important;
  margin: 56px 0 !important;
}
@media (max-width: 1023px) {
  .ryvo.ryvo-product .rv-pgrid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ryvo.ryvo-product .rv-why4-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 767px) {
  .ryvo.ryvo-product .rv-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ============================================================
   PDP Global Centering & Layout Calibration
   Ensures all product info, galleries, tables & custom B2B blocks
   are centered with 1240px max-width and clean responsive padding.
   ============================================================ */

.product-information,
.section--page-width:has(.product-information__grid),
section:has(.product-information__grid) {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.product-information__grid {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Rich Text & Product Details Column */
.product-details,
.product__description,
.product-information .rte,
.product-information [data-testid="product-details"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* B2B Specification Tables & Packaging Matrix inside PDP */
.product-information table,
.product__description table,
.rte table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  margin: 18px 0 24px !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  border: 1px solid #E5E7EB !important;
}

.product-information table th,
.product__description table th {
  background-color: #F8FAFC !important;
  color: #0E2A47 !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: left !important;
  border-bottom: 1px solid #E2E8F0 !important;
  white-space: nowrap !important;
}

.product-information table td,
.product__description table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.product-information table tr:last-child td,
.product__description table tr:last-child td {
  border-bottom: none !important;
}

/* Custom B2B Action & Spec Cards in PDP */
.product-information .rv-pdp-card,
.product-information div[style*="background:#f8fafc"],
.product-information div[style*="background: #f8fafc"],
.product-information div[style*="background:#f0fdf4"],
.product-information div[style*="background: #f0fdf4"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 767px) {
  .product-information,
  .section--page-width:has(.product-information__grid),
  section:has(.product-information__grid) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .product-information table,
  .product__description table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ============================================================
   RYVO Harmonious B2B Typography System & Layout Calibration
   Standardizes font scale, heading hierarchy, FAQ cards & centering.
   ============================================================ */

body, .ryvo, .rv-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif !important;
  color: #1F2937 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Universal Page Centering & Safe Padding */
.ryvo .rv-wrap,
.rv-page .rv-wrap,
.shopify-section .rv-wrap,
.shopify-section.ryvo .rv-wrap {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Eyebrow Label */
.ryvo .rv-eyebrow,
.rv-eyebrow {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #245E58 !important;
  margin: 0 0 8px 0 !important;
}

/* H1 - Page Main Heading */
.ryvo h1,
.rv-page h1,
.rv-band-top h1,
.shopify-section.ryvo h1 {
  font-size: 36px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #111827 !important;
  margin: 0 0 14px 0 !important;
}

/* H2 - Section Heading (e.g. Common Questions, Target Customers, etc.) */
.ryvo h2,
.rv-page h2,
.rv-section h2,
.shopify-section.ryvo h2 {
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #111827 !important;
  margin: 0 0 14px 0 !important;
}

/* H3 - Card / Question Title */
.ryvo h3,
.rv-page h3,
.rv-mod h3,
.rv-cols h3,
.shopify-section.ryvo h3 {
  font-size: 16.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 0 6px 0 !important;
}

/* H4 - Sub-items */
.ryvo h4,
.rv-page h4,
.shopify-section.ryvo h4 {
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: #1F2937 !important;
  margin: 0 0 4px 0 !important;
}

/* Paragraphs & Descriptions */
.ryvo p,
.rv-page p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #4B5563 !important;
  margin: 0 0 12px 0 !important;
}

.ryvo .rv-sub,
.rv-page .rv-sub,
.rv-band-top .rv-sub {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #4B5563 !important;
  max-width: 780px !important;
  margin: 0 0 16px 0 !important;
}

/* FAQ Grid & Balanced Cards */
.ryvo .rv-cols,
.rv-page .rv-cols,
.shopify-section.ryvo .rv-cols {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px 28px !important;
  margin-top: 20px !important;
  margin-bottom: 40px !important;
  width: 100% !important;
}

.ryvo .rv-mod,
.rv-page .rv-mod,
.shopify-section.ryvo .rv-mod {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  box-sizing: border-box !important;
}

.ryvo .rv-mod h3,
.rv-page .rv-mod h3 {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
}

.ryvo .rv-mod p,
.rv-page .rv-mod p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #4B5563 !important;
  margin: 0 !important;
}

/* Responsive Typography */
@media (max-width: 1023px) {
  .ryvo h1, .rv-page h1, .rv-band-top h1 { font-size: 30px !important; }
  .ryvo h2, .rv-page h2, .rv-section h2 { font-size: 22px !important; }
  .ryvo .rv-cols, .rv-page .rv-cols { grid-template-columns: 1fr !important; gap: 16px !important; }
}

@media (max-width: 767px) {
  .ryvo h1, .rv-page h1, .rv-band-top h1 { font-size: 24px !important; line-height: 1.25 !important; }
  .ryvo h2, .rv-page h2, .rv-section h2 { font-size: 19px !important; line-height: 1.3 !important; }
  .ryvo .rv-wrap, .rv-page .rv-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .ryvo .rv-mod, .rv-page .rv-mod { padding: 14px 16px !important; }
}


/* ============================================================
   RYVO Products Catalog Page — 5-Column Category Grid
   ============================================================ */

.rv-lrs {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 40px;
  margin-bottom: 64px;
}

.rv-lr {
  width: 100%;
}

.rv-lr-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
}

.rv-lr-head h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 4px 0 !important;
}

.rv-lr-sub {
  font-size: 14px !important;
  color: #6B7280 !important;
  margin: 0 !important;
}

.rv-lr-all {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  background: #F3F4F6 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.rv-lr-all:hover {
  background: #111827 !important;
  color: #FFFFFF !important;
}

/* 5 Columns on Desktop */
.rv-lr-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

/* 4 Items category takes 4 columns or centered nicely */
.rv-lr-grid--4 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Product Card */
.rv-lc {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  box-sizing: border-box !important;
}

.rv-lc:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
  border-color: #CBD5E1 !important;
}

.rv-lc-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #FAFAF8 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rv-lc-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease !important;
}

.rv-lc:hover .rv-lc-media img {
  transform: scale(1.04) !important;
}

.rv-lc-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #374151 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
  z-index: 2 !important;
}

.rv-lc-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  margin: 10px 0 8px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 36px !important;
}

.rv-lc-meta {
  margin-top: auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #F8FAFC !important;
  border: 1px solid #F1F5F9 !important;
  border-radius: 6px !important;
  padding: 5px 8px !important;
}

.rv-lc-model {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748B !important;
}

.rv-lc-go {
  font-size: 12px !important;
  color: #0E2A47 !important;
  font-weight: 600 !important;
}

/* Responsive Grid Breakdown */
@media (max-width: 1200px) {
  .rv-lr-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .rv-lr-grid,
  .rv-lr-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .rv-lr-grid,
  .rv-lr-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .rv-lc-title {
    font-size: 12.5px !important;
    min-height: 32px !important;
  }
}

/* ============================================================
   RYVO Global Compact Dark Footer (#0B1320 & Pure Contrast)
   ============================================================ */

footer,
.shopify-section-group-footer-group,
.ryvo.rv-footer {
  background-color: #0B1320 !important;
  color: #CBD5E1 !important;
}

.ryvo.rv-footer {
  padding: 44px 0 28px 0 !important;
  border-top: 1px solid #1E293B !important;
  position: relative !important;
  z-index: 10 !important;
}

.rv-footercols {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 1fr !important;
  gap: 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.rv-fcol {
  display: flex !important;
  flex-direction: column !important;
}

.rv-fcol-brand {
  padding-right: 16px !important;
}

.rv-fbrand-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  text-decoration: none !important;
}

.rv-fbrand-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
}

.rv-fmut {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #94A3B8 !important;
  margin: 0 0 10px 0 !important;
}

.rv-fcontact {
  list-style: none !important;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.rv-fcontact li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: #94A3B8 !important;
  list-style-type: none !important;
}

.rv-fcontact .rv-fk {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #64748B !important;
  min-width: 52px !important;
}

.rv-fcontact a.rv-fv,
.rv-fcontact span.rv-fv {
  color: #CBD5E1 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.rv-fcontact a.rv-fv:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

.rv-fcol h4 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 14px 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.rv-fcol ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.rv-fcol ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: none !important;
}

.rv-fcol ul li a {
  font-size: 13px !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

.rv-fcol ul li a:hover {
  color: #FFFFFF !important;
  transform: translateX(2px) !important;
}

/* Bottom copyright / policy sub-bar */
.rv-fbottom {
  margin-top: 32px !important;
  padding-top: 16px !important;
  border-top: 1px solid #1E293B !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: #64748B !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.rv-fbottom a {
  color: #64748B !important;
  text-decoration: none !important;
  margin-left: 14px !important;
  transition: color 0.15s ease !important;
}

.rv-fbottom a:hover {
  color: #CBD5E1 !important;
}

/* Utility section override for dark theme */
.footer-utilities,
.section-footer-utilities,
.footer-utilities .section-background {
  background-color: #0B1320 !important;
  color: #64748B !important;
  border-top: none !important;
  padding-top: 0 !important;
  padding-bottom: 20px !important;
}

.footer-utilities a,
.footer-utilities p,
.footer-utilities span {
  color: #64748B !important;
}

.footer-utilities a:hover {
  color: #CBD5E1 !important;
}

/* Responsive Breakdown */
@media (max-width: 990px) {
  .rv-footercols {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .rv-fcol-brand {
    grid-column: span 2 !important;
  }
}

@media (max-width: 560px) {
  .rv-footercols {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .rv-fcol-brand {
    grid-column: span 1 !important;
  }
  .ryvo.rv-footer {
    padding: 32px 0 20px 0 !important;
  }
}

/* ============================================================
   RYVO Byline & Avatar Constraint & Insights Cards
   ============================================================ */

.rv-byline {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  font-size: 12.5px !important;
  color: #64748B !important;
}

.rv-byline img.rv-byline-av,
img.rv-byline-av {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #E2E8F0 !important;
}

.rv-byline-name {
  font-weight: 600 !important;
  color: #334155 !important;
  margin-right: 6px !important;
}

.rv-byline-date {
  color: #94A3B8 !important;
}

.rv-mod {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.rv-mod:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.06) !important;
  border-color: #CBD5E1 !important;
}

.rv-mod-img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  background: #F1F5F9 !important;
}

.rv-mod-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.rv-mod h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px 0 !important;
  color: #0F172A !important;
}

.rv-mod h3 a {
  color: #0F172A !important;
  text-decoration: none !important;
}

.rv-mod h3 a:hover {
  color: #0E2A47 !important;
  text-decoration: underline !important;
}

.rv-mod p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #64748B !important;
  margin: 0 !important;
}


/* ============================================================
   RYVO PDP 2x2 4-Grid Product Photo Gallery (四宫格画廊 - 参考图对齐)
   ============================================================ */
.ryvo.ryvo-product .rv-pgrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  gap: 48px !important;
  align-items: start !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

.ryvo.ryvo-product .rv-media {
  width: 100% !important;
  position: sticky !important;
  top: 90px !important;
}

/* Strict 2x2 4-Grid Layout */
.ryvo.ryvo-product .rv-gal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  width: 100% !important;
}

.ryvo.ryvo-product .rv-gal-it {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  cursor: zoom-in !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.ryvo.ryvo-product .rv-gal-it:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 20px -4px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

.ryvo.ryvo-product .rv-gal-it img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease !important;
}

.ryvo.ryvo-product .rv-gal-it:hover img {
  transform: scale(1.03) !important;
}

/* Hide images beyond 4th from grid, visible in Lightbox */
.ryvo.ryvo-product .rv-gal-it:nth-child(n+5) {
  display: none !important;
}

/* "Show all X photos" pill on 4th image (as in reference image) */
.ryvo.ryvo-product .rv-gal-more {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 5 !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
  letter-spacing: 0.02em !important;
}

@media (max-width: 900px) {
  .ryvo.ryvo-product .rv-pgrid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 600px) {
  .ryvo.ryvo-product .rv-gal {
    gap: 8px !important;
  }
  .ryvo.ryvo-product .rv-gal-it {
    border-radius: 8px !important;
  }
}



/* ============================================================
   RYVO PDP Related Products / "You may also like" (参考图2风格)
   ============================================================ */
.rv-rel {
  margin: 64px 0 32px 0 !important;
  padding-top: 48px !important;
  border-top: 1px solid #E5E7EB !important;
}

.rv-rel-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 24px !important;
}

.rv-rel-head h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 4px 0 0 0 !important;
}

.rv-relrow {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

.rv-relcard {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.rv-relcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
  border-color: #CBD5E1 !important;
}

.rv-relcard-img {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #FAFAF8 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.rv-relcard-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease !important;
}

.rv-relcard:hover .rv-relcard-img img {
  transform: scale(1.04) !important;
}

.rv-relcard b {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 38px !important;
}

.rv-relcard span {
  font-size: 12.5px !important;
  color: #64748B !important;
  margin-bottom: 14px !important;
  display: block !important;
}

.rv-relcard em,
.rv-relcard-btn {
  font-style: normal !important;
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0E2A47 !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 16px !important;
  border-radius: 6px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(14, 42, 71, 0.15) !important;
  transition: all 0.18s ease !important;
}

.rv-relcard:hover em,
.rv-relcard:hover .rv-relcard-btn {
  background: #111827 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(14, 42, 71, 0.25) !important;
}

@media (max-width: 1024px) {
  .rv-relrow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  .rv-relrow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .rv-relcard {
    padding: 10px !important;
  }
  .rv-relcard b {
    font-size: 13px !important;
    min-height: 34px !important;
  }
  .rv-relcard em,
  .rv-relcard-btn {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
}



/* ============================================================
   RYVO Product Categories Cards (1行5款标准卡片网格)
   ============================================================ */
.rv-pcards {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 24px 0 40px 0 !important;
}

.rv-pcard {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.rv-pcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
  border-color: #CBD5E1 !important;
}

.rv-pcard img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: #FAFAF8 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

.rv-pcard h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
}

.rv-pcard p {
  font-size: 12.5px !important;
  color: #64748B !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (max-width: 1100px) {
  .rv-pcards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .rv-pcards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .rv-pcard h3 {
    font-size: 13px !important;
  }
}