/* =========================
   PE Faucet Catalog — Frontend
   Card grid + RTL slide navigation
   ========================= */

   .pefc-container{
    --pefc-blue:#0d63c9;
    --pefc-gold:#f9e29c;
    --pefc-radius:16px;
    --pefc-gap:18px;
    --pefc-card-h:360px;
    --pefc-footer-h:80px;
    /* Extra inset so 3D/flip transforms don't clip against outer frame corners */
    --pefc-edge-pad-x:32px;
    --pefc-edge-pad-y:24px;
    /* Motion tuning */
    --pefc-flip-dur:950ms;
    --pefc-flip-ease:cubic-bezier(.65,0,.35,1);
    --pefc-hover-dur:220ms;
    --pefc-hover-ease:cubic-bezier(.16,1,.3,1);
    /* Overlay tuning (video + hover panel) */
     --pefc-overlay-dur:460ms;
     --pefc-overlay-ease:cubic-bezier(.16,1,.3,1);
     --pefc-video-delay:40ms;
    --pefc-panel-delay:60ms;
     --pefc-text-delay:40ms;
     --pefc-icon-delay:90ms;
    /* Header CTA mirror tokens for catalog back buttons */
    --pefc-back-cta-bg:#f6f5fa;
    --pefc-back-cta-fg:#050033;
    --pefc-back-cta-hover:#ececf2;
    --pefc-back-cta-radius:18px;
    --pefc-back-cta-dur:.5s;
    --pefc-back-cta-ease:cubic-bezier(0.5,1,0.89,1);
    --pefc-back-cta-focus:rgba(5,0,51,.28);
    --pefc-header-badge:none;
    /* Back button reveal/hide motion (avoid transform; magnet effect uses transform) */
    --pefc-back-reveal-in:420ms;
    --pefc-back-reveal-out:220ms;
    --pefc-back-reveal-ease:cubic-bezier(.16,1,.3,1);
    --pefc-back-reveal-blur:8px;
    --pefc-back-reveal-shift-x:10px;
    --pefc-back-reveal-shift-y:12px;
    color:#0f172a;
  }
  @media (max-width: 1024px){
    .pefc-container{
      --pefc-card-h:340px;
      --pefc-footer-h:78px;
      --pefc-edge-pad-x:26px;
      --pefc-edge-pad-y:20px;
    }
  }
  @media (max-width: 640px){
    .pefc-container{
      --pefc-card-h:320px;
      --pefc-footer-h:76px;
      --pefc-edge-pad-x:20px;
      --pefc-edge-pad-y:18px;
    }
  }
  
  /* =========================
     Fullscreen layout (fit to viewport, no scroll)
     Applied by default via shortcode, with opt-out support.
     ========================= */
  .pefc-container.pefc-fullscreen{
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }
  .pefc-container.pefc-fullscreen .pefc-shell{
    height:100%;
    max-height:100%;
    display:flex;
    flex-direction:column;
  }
  .pefc-container.pefc-fullscreen .pefc-stage{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    overflow:auto;
    overscroll-behavior:contain;
  }
  .pefc-container.pefc-fullscreen .pefc-panels{
    flex:1 1 auto;
    height:100%;
  }
  .pefc-container.pefc-fullscreen .pefc-panel{
    height:100%;
  }
  .pefc-container.pefc-fullscreen :is(.pefc-grid, .pefc-products, .pefc-flipGrid){
    height:auto;
    min-height:0;
    grid-template-rows:none;
    align-items:start;
  }
  .pefc-container.pefc-fullscreen :is(.pefc-cat-card, .pefc-product-card, .pefc-flipCard){
    height:auto;
    align-self:start;
  }
  .pefc-container.pefc-fullscreen .pefc-cat-imgWrap{
    aspect-ratio:1 / 1;
    flex:0 0 auto;
  }
  .pefc-container.pefc-fullscreen .pefc-product-imgWrap{
    aspect-ratio:1 / 1;
    flex:0 0 auto;
  }
  .pefc-container.pefc-fullscreen .pefc-product-img{
    height:100%;
  }
  
  .pefc-shell{
    width:100%;
    max-width:1100px;
    margin:0 auto;
  }
  
  .pefc-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    padding-inline:var(--pefc-edge-pad-x);
  }
  
  .pefc-header-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  
  .pefc-back{
    appearance:none;
    border:0;
    background:var(--pefc-back-cta-bg);
    border-radius:var(--pefc-back-cta-radius);
    inline-size:auto;
    min-inline-size:44px;
    block-size:44px;
    padding:0 16px;
    cursor:pointer;
    color:var(--pefc-back-cta-fg);
    box-shadow:none;
    font-variation-settings:"wght" 500;
    font-weight:500;
    font-size:14px;
    line-height:1;
    white-space:nowrap;
    opacity:1;
    visibility:visible;
    filter:blur(0);
    will-change:transform, opacity, filter;
    transition:
      background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      opacity var(--pefc-back-reveal-in) var(--pefc-back-reveal-ease),
      filter var(--pefc-back-reveal-in) var(--pefc-back-reveal-ease),
      visibility 0s linear 0s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    position:relative;
    direction:ltr;
  }
  .pefc-back::after{
    content:"";
    display:none;
  }
  .pefc-back:hover{
    background-color:var(--pefc-back-cta-hover);
  }
  /* Lock text color across interaction states (avoid theme-wide button:hover overrides). */
  .pefc-container .pefc-back,
  .pefc-container .pefc-back:hover,
  .pefc-container .pefc-back:active,
  .pefc-container .pefc-back:focus-visible{
    color:var(--pefc-back-cta-fg);
  }
  .pefc-back:active{
    background-color:var(--pefc-back-cta-hover);
  }
  .pefc-back:focus-visible{
    outline:2px solid var(--pefc-back-cta-focus);
    outline-offset:2px;
  }
  .pefc-back.is-hidden{
    opacity:0;
    pointer-events:none;
    filter:blur(var(--pefc-back-reveal-blur));
    visibility:hidden;
    transition:
      background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      opacity var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
      filter var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
      visibility 0s linear var(--pefc-back-reveal-out);
  }
  
  .pefc-back svg{ width:18px; height:18px; display:block }
  .pefc-back svg path{ fill:none; stroke:currentColor; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round }
  .pefc-container[dir="rtl"] .pefc-back svg{ transform:none; transform-origin:center }
  .pefc-backText{ font-weight:500; font-size:14px; line-height:1; color:inherit }
  .pefc-backText{ direction:rtl }

  @media (min-width: 641px){
    .pefc-back{
      position:fixed;
      /* Keep badge fully visible when it's placed on the left side */
      left:calc(24px + 26px);
      top:50%;
      margin-top:-22px;
      z-index:9998;
    }
    .pefc-back::after{
      content:"";
      display:block;
      background-image:var(--pefc-header-badge);
      position:absolute;
      transform:rotate(90deg) translateY(-50%);
      right:99.5%;
      left:auto;
      width:26px;
      height:25px;
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      transition:transform var(--pefc-back-cta-dur) var(--pefc-back-cta-ease);
      pointer-events:none;
    }
    .pefc-container:not(.pefc-active) .pefc-back{
      pointer-events:none;
      opacity:0;
      filter:blur(var(--pefc-back-reveal-blur));
      visibility:hidden;
      transition:
        background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        opacity var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
        filter var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
        visibility 0s linear var(--pefc-back-reveal-out);
    }
  }

  /* Slide-in/out without touching transform (magnet uses transform). */
  @supports (translate: 0 0){
    .pefc-back{ translate:0 0; }
    .pefc-back.is-hidden,
    .pefc-container:not(.pefc-active) .pefc-back{
      translate:calc(-1 * var(--pefc-back-reveal-shift-x)) 0;
    }
    .pefc-back{
      transition:
        background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        opacity var(--pefc-back-reveal-in) var(--pefc-back-reveal-ease),
        filter var(--pefc-back-reveal-in) var(--pefc-back-reveal-ease),
        translate var(--pefc-back-reveal-in) var(--pefc-back-reveal-ease),
        visibility 0s linear 0s;
    }
    .pefc-back.is-hidden,
    .pefc-container:not(.pefc-active) .pefc-back{
      transition:
        background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        opacity var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
        filter var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
        translate var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
        visibility 0s linear var(--pefc-back-reveal-out);
    }
  }

  /* Mobile floating back button (FAB) */
  .pefc-backFab{
    display:none;
    appearance:none;
    border:0;
    background:var(--pefc-back-cta-bg);
    color:var(--pefc-back-cta-fg);
    border-radius:var(--pefc-back-cta-radius);
    block-size:44px;
    padding:0 16px;
    cursor:pointer;
    box-shadow:none;
    font-variation-settings:"wght" 500;
    font-weight:500;
    font-size:14px;
    line-height:1;
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    will-change:opacity, transform, filter;
    transition:
      background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      opacity 260ms var(--pefc-back-reveal-ease),
      transform var(--pefc-back-reveal-in) var(--pefc-back-reveal-ease),
      filter var(--pefc-back-reveal-in) var(--pefc-back-reveal-ease);
    align-items:center;
    gap:10px;
    position:fixed;
    inset-inline-start:16px;
    inset-block-end:calc(16px + env(safe-area-inset-bottom));
    z-index:9999;
    max-width:calc(100vw - 32px);
    white-space:nowrap;
    touch-action:manipulation;
  }
  .pefc-backFab:hover{ background-color:var(--pefc-back-cta-hover) }
  .pefc-backFab:active{ background-color:var(--pefc-back-cta-hover) }
  .pefc-backFab:focus-visible{ outline:2px solid var(--pefc-back-cta-focus); outline-offset:2px }
  .pefc-container .pefc-backFab,
  .pefc-container .pefc-backFab:hover,
  .pefc-container .pefc-backFab:active,
  .pefc-container .pefc-backFab:focus-visible{
    color:var(--pefc-back-cta-fg);
  }
  .pefc-backFab.is-hidden{
    opacity:0;
    pointer-events:none;
    transform:translateY(var(--pefc-back-reveal-shift-y)) scale(.98);
    filter:blur(var(--pefc-back-reveal-blur));
    transition:
      background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
      opacity var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
      transform var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
      filter var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease);
  }

  .pefc-backFabIcon{ inline-size:18px; block-size:18px; display:inline-flex; align-items:center; justify-content:center; color:currentColor }
  .pefc-backFabIcon svg{ width:18px; height:18px; display:block }
  .pefc-backFabIcon svg path{ fill:none; stroke:currentColor; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round }
  .pefc-container[dir="rtl"] .pefc-backFabIcon svg{ transform:scaleX(-1); transform-origin:center }
  .pefc-backFabText{ font-weight:500; font-size:14px; line-height:1; color:inherit }

  @media (max-width: 640px){
    .pefc-back{ display:none; }
    .pefc-back::after{ display:none !important }
    .pefc-backText{ display:none }
    .pefc-backFab{ display:inline-flex }
    .pefc-container:not(.pefc-active) .pefc-backFab{
      opacity:0;
      pointer-events:none;
      transform:translateY(var(--pefc-back-reveal-shift-y)) scale(.98);
      filter:blur(var(--pefc-back-reveal-blur));
      transition:
        background-color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        color var(--pefc-back-cta-dur) var(--pefc-back-cta-ease),
        opacity var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
        transform var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease),
        filter var(--pefc-back-reveal-out) var(--pefc-back-reveal-ease);
    }
    .pefc-container.pefc-has-back.pefc-active .pefc-stage{
      padding-bottom:calc(var(--pefc-edge-pad-y) + 86px + env(safe-area-inset-bottom));
    }
  }
  
  .pefc-srOnly{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  
  .pefc-titleWrap{ min-width:0 }
  .pefc-title{
    font-size:18px;
    font-weight:900;
    line-height:1.25;
    margin:0;
    color:#0f172a;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .pefc-breadcrumb{
    margin-top:2px;
    font-size:12px;
    line-height:1.25;
    min-height:1.25em;
    color:#475569;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  
  .pefc-stage{
    position:relative;
    overflow:hidden;
    padding:var(--pefc-edge-pad-y) var(--pefc-edge-pad-x);
  }
  .pefc-stage.is-animating{
    pointer-events:none;
  }
  .pefc-panels{
    display:flex;
    width:100%;
    transform:translateX(0);
    transition:transform 520ms cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }
  .pefc-panel{
    flex:0 0 100%;
  }
  .pefc-panelInner{
    padding:0;
  }
  
  /* Grid */
  .pefc-grid{
    display:grid;
    grid-template-columns:repeat(var(--pefc-cols-desktop, 3), minmax(0, 1fr));
    gap:var(--pefc-gap);
  }
  @media (max-width: 1024px){
    .pefc-grid{
      grid-template-columns:repeat(var(--pefc-cols-tablet, 2), minmax(0, 1fr));
      gap:16px;
    }
  }
  @media (max-width: 640px){
    .pefc-grid{
      grid-template-columns:repeat(var(--pefc-cols-mobile, 1), minmax(0, 1fr));
      gap:14px;
    }
  }
  
  /* Keep products aligned with category grid (for flip illusion) */
  :is(.pefc-products, .pefc-flipGrid){
    display:grid;
    grid-template-columns:repeat(var(--pefc-cols-desktop, 3), minmax(0, 1fr));
    gap:var(--pefc-gap);
  }
  @media (max-width: 1024px){
    :is(.pefc-products, .pefc-flipGrid){
      grid-template-columns:repeat(var(--pefc-cols-tablet, 2), minmax(0, 1fr));
      gap:16px;
    }
  }
  @media (max-width: 640px){
    :is(.pefc-products, .pefc-flipGrid){
      grid-template-columns:repeat(var(--pefc-cols-mobile, 1), minmax(0, 1fr));
      gap:14px;
    }
  }
  
  /* Category card */
  .pefc-cat-card{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:var(--pefc-radius);
    aspect-ratio:1 / 1;
    height:auto;
    align-self:start;
    background:transparent;
    border:0;
    box-shadow:0 12px 30px rgba(2,6,23,.08);
    cursor:pointer;
    transform:translateZ(0);
    will-change:transform;
    transition:transform var(--pefc-hover-dur) var(--pefc-hover-ease), box-shadow var(--pefc-hover-dur) var(--pefc-hover-ease), border-color var(--pefc-hover-dur) var(--pefc-hover-ease);
    user-select:none;
  }
  .pefc-cat-card:active{ transform:translateZ(0) }
  .pefc-cat-card:focus-visible{
    outline:3px solid rgba(13, 99, 201, .25);
    outline-offset:3px;
  }
  
  .pefc-cat-card::after,
  .pefc-product-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(1200px 320px at 50% 0%, rgba(255,255,255,.55), transparent 60%);
    transition:opacity var(--pefc-hover-dur) var(--pefc-hover-ease);
  }
  
  .pefc-cat-imgWrap{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    flex:0 0 auto;
    background:linear-gradient(135deg,#0f172a,#334155);
    overflow:hidden;
  }
  .pefc-cat-img{
    width:100%;
    height:100%;
    display:block;
    /* Fill the card area without "letterbox" gaps (top/bottom whitespace). */
    object-fit:var(--pefc-cat-img-fit, cover);
    object-position:center;
  }
  
  /* Hover video + overlay (Websima-like) */
  .pefc-hiddenSvg{ position:absolute; width:0; height:0; overflow:hidden }
  
  .pefc-hoverPoster{
    transition:opacity var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease));
    will-change:opacity;
  }
  
  .pefc-hoverVideo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transform:scale(1.035);
    transform-origin:center;
    transition:
      opacity var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease)),
      transform var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease));
    transition-delay:0ms;
    pointer-events:none;
    background:#000;
    will-change:opacity, transform;
  }
  
  /* Reveal video only when it is actually playing (prevents black flash while loading) */
  .pefc-video-playing .pefc-hoverVideo{
    opacity:1;
    transform:scale(1);
    transition-delay:var(--pefc-video-delay, 0ms);
  }

  /* Dim poster only when video is actually playing (keeps hover smooth while buffering) */
  .pefc-video-playing .pefc-hoverPoster{
    opacity:.15;
  }

  /* Keep the hover panel visible during flip transitions (prevents a 1-frame “pop” on click) */
  .pefc-forceHover .pefc-hoverPanel{
    opacity:1;
    transform:none;
    transition-delay:0ms;
  }
  .pefc-forceHover .pefc-hoverPanelText{
    opacity:1;
    transform:none;
    transition-delay:0ms;
  }
  .pefc-forceHover .pefc-hoverIcon{
    opacity:1;
    transform:none;
    transition-delay:0ms;
  }

  .pefc-hoverPanel{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px 10px 12px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.12);
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 18px 40px rgba(2,6,23,.18);
    opacity:0;
    transform:translateY(8px);
    transition:opacity var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease)), transform var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease));
    pointer-events:none;
    will-change:opacity, transform;
  }
  .pefc-hoverPanelText{ min-width:0 }
  /* Micro animations inside the panel (keeps the overall look, improves motion) */
  .pefc-hoverPanelText{
    opacity:0;
    transform:translateY(2px);
    transition:
      opacity var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease)),
      transform var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease));
    transition-delay:0ms;
    will-change:opacity, transform;
  }
  .pefc-hoverTitle{
    font-weight:900;
    font-size:14px;
    line-height:1.12;
    color:#0f172a;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .pefc-hoverSub{
    margin-top:3px;
    font-weight:800;
    font-size:12px;
    line-height:1.12;
    color:#334155;
    opacity:.92;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    direction:ltr;
  }
  .pefc-hoverIcon{
    flex:0 0 auto;
    inline-size:40px;
    block-size:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border:1px solid rgba(15,23,42,.12);
    box-shadow:0 10px 22px rgba(2,6,23,.12);
    color:#0f172a;
    opacity:0;
    transform:translateX(-2px) scale(.94);
    transform-origin:center;
    transition:
      opacity var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease)),
      transform var(--pefc-overlay-dur, var(--pefc-hover-dur)) var(--pefc-overlay-ease, var(--pefc-hover-ease));
    transition-delay:0ms;
    will-change:opacity, transform;
  }
  .pefc-hoverIcon svg{ width:18px; height:18px; display:block }
  .pefc-hoverIcon svg path{ fill:none; stroke:currentColor; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round }
  
  @media (hover: hover) and (pointer: fine){
    :is(.pefc-cat-card, .pefc-product-card):hover .pefc-hoverPoster{
      opacity:1;
    }
    :is(.pefc-cat-card, .pefc-product-card):hover .pefc-hoverPanel{
      opacity:1;
      transform:none;
      transition-delay:var(--pefc-panel-delay, 0ms);
    }
    :is(.pefc-cat-card, .pefc-product-card):hover .pefc-hoverPanelText{
      opacity:1;
      transform:none;
      transition-delay:calc(var(--pefc-panel-delay, 0ms) + var(--pefc-text-delay, 0ms));
    }
    :is(.pefc-cat-card, .pefc-product-card):hover .pefc-hoverIcon{
      opacity:1;
      transform:none;
      transition-delay:calc(var(--pefc-panel-delay, 0ms) + var(--pefc-icon-delay, 0ms));
    }
    .pefc-cat-card:focus-visible .pefc-hoverVideo{
      /* video reveal is gated by `.pefc-video-playing` */
      opacity:0;
    }
    .pefc-cat-card:focus-visible .pefc-hoverPoster{
      opacity:1;
    }
    .pefc-cat-card:focus-visible .pefc-hoverPanel{
      opacity:1;
      transform:none;
      transition-delay:var(--pefc-panel-delay, 0ms);
    }
    .pefc-cat-card:focus-visible .pefc-hoverPanelText{
      opacity:1;
      transform:none;
      transition-delay:calc(var(--pefc-panel-delay, 0ms) + var(--pefc-text-delay, 0ms));
    }
    .pefc-cat-card:focus-visible .pefc-hoverIcon{
      opacity:1;
      transform:none;
      transition-delay:calc(var(--pefc-panel-delay, 0ms) + var(--pefc-icon-delay, 0ms));
    }
  }
  
  .pefc-cat-caption{
    background:var(--pefc-blue);
    height:var(--pefc-footer-h);
    padding:10px 10px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    overflow:hidden;
  }
  .pefc-cat-fa{
    color:#fff;
    font-weight:900;
    font-size:16px;
    line-height:1.12;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .pefc-cat-en{
    color:#e6f0ff;
    font-weight:800;
    font-size:14px;
    line-height:1.12;
    margin-top:0;
    direction:ltr;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  
  /* Flip transition grid (temporary) */
  .pefc-flipCard{
    position:relative;
    perspective:1200px;
    height:auto;
    align-self:start;
    transition:opacity var(--pefc-flip-dur) var(--pefc-flip-ease);
    transition-delay:var(--pefc-delay, 0ms);
    will-change:opacity;
  }
  .pefc-flipInner{
    display:grid;
    transform-style:preserve-3d;
    transition:transform var(--pefc-flip-dur) var(--pefc-flip-ease);
    transition-delay:var(--pefc-delay, 0ms);
    will-change:transform;
    /* Make flip cards match the final grid cards sizing (prevents post-flip "jump"). */
    width:100%;
    height:100%;
  }
  .pefc-flipFace{
    grid-area:1 / 1;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    width:100%;
    height:100%;
  }
  .pefc-flipFace > :is(.pefc-cat-card, .pefc-product-card){
    width:100%;
    height:100%;
  }
  .pefc-flipFace.is-back{
    transform:rotateY(180deg);
  }
  .pefc-flipGrid.is-flipped .pefc-flipInner{
    transform:rotateY(var(--pefc-flip-rot, 180deg));
  }
  .pefc-flipCard.is-enter{ opacity:0 }
  .pefc-flipGrid.is-flipped .pefc-flipCard.is-enter{ opacity:1 }
  .pefc-flipGrid.is-flipped .pefc-flipCard.is-exit{ opacity:0 }
  
  /* Products */
  .pefc-product-card{
    position:relative;
    border-radius:var(--pefc-radius);
    background:transparent;
    border:0;
    cursor:pointer;
    user-select:none;
    box-shadow:0 12px 30px rgba(2,6,23,.06);
    overflow:hidden;
    aspect-ratio:1 / 1;
    height:auto;
    align-self:start;
    display:flex;
    flex-direction:column;
    transform:translateZ(0);
    will-change:transform;
    transition:transform var(--pefc-hover-dur) var(--pefc-hover-ease), box-shadow var(--pefc-hover-dur) var(--pefc-hover-ease), border-color var(--pefc-hover-dur) var(--pefc-hover-ease);
  }
  .pefc-product-card:focus-visible{
    outline:3px solid rgba(13, 99, 201, .25);
    outline-offset:3px;
  }
  
  @media (hover: hover) and (pointer: fine){
    :is(.pefc-cat-card, .pefc-product-card):hover{
      border-color:#cbd5e1;
      /* Tighter, less "spread" shadow on hover */
      box-shadow:0 14px 34px rgba(2,6,23,.12), 0 6px 14px rgba(2,6,23,.07);
    }
    :is(.pefc-cat-card, .pefc-product-card):hover::after{
      opacity:.18;
    }
    :is(.pefc-cat-card, .pefc-product-card):active{
      box-shadow:0 12px 28px rgba(2,6,23,.11), 0 5px 12px rgba(2,6,23,.07);
    }
  }
  .pefc-product-imgWrap{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    flex:0 0 auto;
    background:#f1f5f9;
    overflow:hidden;
  }
  .pefc-product-img{
    width:100%;
    height:100%;
    /* Match category cards: avoid top/bottom gaps caused by `contain` in a fixed ratio box. */
    object-fit:var(--pefc-product-img-fit, cover);
    object-position:center;
    display:block;
  }
  .pefc-product-body{
    height:var(--pefc-footer-h);
    padding:10px 12px;
    background:var(--pefc-gold);
    /* subtle separator from the image without affecting layout */
    box-shadow:inset 0 1px 0 rgba(2,6,23,.08);
  
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows:auto auto;
    column-gap:12px;
    row-gap:6px;
    align-content:center;
    flex:0 0 auto;
    overflow:hidden;
  }
  .pefc-product-name{
    font-weight:900;
    font-size:15px;
    color:#0f172a;
    line-height:1.18;
    grid-column:2;
    grid-row:1;
    min-width:0;
    text-align:right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .pefc-product-en{
    margin-top:0;
    font-weight:700;
    font-size:12.5px;
    line-height:1.15;
    color:#475569;
    direction:ltr;
    grid-column:1;
    grid-row:1;
    min-width:0;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .pefc-product-priceRow{
    display:inline-flex;
    align-items:baseline;
    justify-content:flex-start;
    gap:6px;
    margin-top:0;
    align-self:flex-start;
    white-space:nowrap;
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
  }
  .pefc-product-price{ font-weight:900; font-size:17px; line-height:1.15; color:#0f172a }
  .pefc-product-unit{ font-size:12px; color:#64748b; white-space:nowrap }
  .pefc-product-card .pefc-specs{ display:none; }
  .pefc-specs{
    list-style:none;
    margin:10px 0 0;
    padding:0;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }
  .pefc-specs li{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px dashed #e2e8f0; font-size:12px }
  .pefc-specs .k{ color:#475569; font-weight:800 }
  .pefc-specs .v{ color:#0f172a; font-weight:700; text-align:left; direction:ltr }
  
  /* Empty / hints */
  .pefc-empty{
    background:#f1f5f9;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    padding:16px;
    color:#334155;
    font-size:13px;
  }
  
  @media (prefers-reduced-motion: reduce){
    .pefc-panels{ transition:none !important }
    .pefc-cat-card{ transition:none !important }
    .pefc-product-card{ transition:none !important }
    .pefc-back{ transition:none !important }
    .pefc-backFab{ transition:none !important }
    .pefc-back{ filter:none !important }
    .pefc-backFab{ filter:none !important; transform:none !important }
    @supports (translate: 0 0){
      .pefc-back{ translate:0 0 !important }
    }
    .pefc-flipInner{ transition:none !important }
    .pefc-flipCard{ transition:none !important }
    .pefc-hoverPoster{ transition:none !important }
    .pefc-hoverVideo{ transition:none !important }
    .pefc-hoverPanel{ transition:none !important; transform:none !important }
    .pefc-hoverPanelText{ transition:none !important; transform:none !important; opacity:1 !important }
    .pefc-hoverIcon{ transition:none !important; transform:none !important; opacity:1 !important }
  }