/*! Roll Pro Configurator · rpc.css · v0.8.0
 * Every rule is scoped under #rpc-app and every class uses the rpc- prefix. No global selectors.
 * Layout (marketplace product page): views | title + steps | your selection (subtotal box), then the sections below.
 *   phones / narrow: one column: title → pinned drawing → steps → your selection → sections (accordions)
 *   ≥980px: views | title + steps + your selection;  ≥1240px: views | title + steps | your selection
 * The container query lives on .rpc-cq (not #rpc-app) so the help sheet and lightbox can be position:fixed to the viewport.
 */
/* Bundled fonts (SIL Open Font License, see assets/fonts). Own family names, so they never clash with the theme's.
   Inter stands in for the marketplace's own (licensed) face; Roboto / Montserrat stay for older saved themes. */
@font-face{font-family:"RPC Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-wght.woff2) format("woff2-variations"),url(../fonts/inter-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"RPC Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/roboto-latin-wght.woff2) format("woff2-variations"),url(../fonts/roboto-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"RPC Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-latin-wght.woff2) format("woff2-variations"),url(../fonts/montserrat-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
#rpc-app{
  /* ---- Look of a marketplace product page (override any of them in presentation.json → "theme", see README) ---- */
  --rpc-font:"RPC Inter",Inter,"Helvetica Neue",Arial,sans-serif;
  --rpc-font-head:var(--rpc-font);
  --rpc-ink:#0F1111;            /* text */
  --rpc-ink-2:#333838;
  --rpc-muted:#565959;          /* secondary text */
  --rpc-locked:#8C9090;
  --rpc-link:#007185;           /* links */
  --rpc-link-hover:#C7511F;
  --rpc-accent:#007185;         /* selection, focus, sliders */
  --rpc-primary:#0F1111;
  --rpc-on-primary:#FFFFFF;
  --rpc-cta:#FFD814;            /* Add to Cart */
  --rpc-cta-bd:#FCD200;
  --rpc-cta-hover:#F7CA00;
  --rpc-on-cta:#0F1111;
  --rpc-buy:#FFA41C;            /* Buy Now */
  --rpc-buy-bd:#FF8F00;
  --rpc-buy-hover:#FA8900;
  --rpc-star:#FFA41C;
  --rpc-star-bd:#DE7921;
  --rpc-glow:#E77600;           /* chosen view thumbnail */
  --rpc-next:#FFF4D8;           /* the step to do next */
  --rpc-next-bd:#FFA41C;
  --rpc-sel-bg:#F0F8FA;         /* chosen tile */
  --rpc-bg:#FFFFFF;
  --rpc-soft:#F0F2F2;
  --rpc-soft-2:#F7FAFA;
  --rpc-bar:#FFFFFF;
  --rpc-line:#D5D9D9;
  --rpc-divider:#E7E7E7;
  --rpc-border:#888C8C;
  --rpc-radius:8px;
  --rpc-btn-case:none;
  --rpc-btn-track:normal;
  --rpc-max:1500px;
  --rpc-sticky-top:20px;
  /* ---- System tokens ---- */
  --rpc-ok:#007600;
  --rpc-err:#CC0C39;
  --rpc-err-bg:#FFF5F6;
  --rpc-warn-bg:#FFFAEA;
  --rpc-warn-bd:#F0C14B;
  --rpc-warn-ink:#8A5B00;
  --rpc-info-bg:#F0F8FA;
  --rpc-info-bd:#9ED3DC;
  --rpc-focus:#C8F3FA;
  --rpc-gutter:16px;
  display:block;
  background:var(--rpc-bg);
  color:var(--rpc-ink);
  font:400 16px/1.5 var(--rpc-font);
  -webkit-text-size-adjust:100%;
  text-align:left;
}

/* ---------- local reset (beats Astra / Elementor element styles, never leaks out) ---------- */
#rpc-app *,#rpc-app *::before,#rpc-app *::after{box-sizing:border-box}
#rpc-app [hidden]{display:none!important}
#rpc-app :where(h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,fieldset,legend,table){margin:0;padding:0;border:0}
#rpc-app :where(ul,ol){list-style:none}
#rpc-app :where(h1,h2,h3,h4){font-family:var(--rpc-font-head);color:var(--rpc-ink);text-transform:none;letter-spacing:normal;line-height:1.25}
#rpc-app :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;border-radius:0;min-height:0;line-height:inherit;cursor:pointer;text-align:inherit;width:auto}
#rpc-app :where(input,select,textarea){font:inherit;color:inherit;margin:0}
#rpc-app :where(a){color:var(--rpc-link);text-decoration:none}
#rpc-app :where(a):hover{color:var(--rpc-link-hover);text-decoration:underline}
#rpc-app :where(img){max-width:100%;height:auto;display:block}
#rpc-app :where(svg){display:block;max-width:100%}
#rpc-app :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--rpc-accent);outline-offset:2px;box-shadow:0 0 0 4px var(--rpc-focus)}
#rpc-app .rpc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#rpc-app .rpc-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#rpc-app .rpc-ic--leaf{fill:#D52B1E;stroke:none}
#rpc-app .rpc-svg text{font-family:var(--rpc-font)}
#rpc-app .rpc-svg .rpc-f-pri{fill:var(--rpc-ink)}
#rpc-app .rpc-svg .rpc-f-acc{fill:var(--rpc-accent)}
#rpc-app .rpc-svg .rpc-s-pri{stroke:var(--rpc-ink)}
#rpc-app .rpc-svg .rpc-s-acc{stroke:var(--rpc-accent)}
#rpc-app .rpc-num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
#rpc-app .rpc-cq{container:rpc/inline-size;overflow-x:clip}
#rpc-app .rpc-wrap{max-width:var(--rpc-max);margin:0 auto;padding:0 var(--rpc-gutter)}
/* breadcrumb trail */
#rpc-app .rpc-topline{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;padding:8px 0 6px;font-size:14px;color:var(--rpc-muted)}
#rpc-app .rpc-back{display:inline-flex;align-items:center;gap:4px;min-height:32px;color:var(--rpc-muted);text-decoration:none}
#rpc-app .rpc-back:hover{color:var(--rpc-link-hover);text-decoration:underline}
#rpc-app .rpc-crumb{color:var(--rpc-muted)}
#rpc-app .rpc-crumb--here{color:var(--rpc-ink-2)}
/* one column: title, pinned drawing, steps, your selection */
#rpc-app .rpc-grid{display:flex;flex-direction:column;gap:14px}
#rpc-app .rpc-head{grid-area:head;order:1;min-width:0}
#rpc-app .rpc-pvcol{grid-area:preview;order:2;min-width:0}
#rpc-app .rpc-config{grid-area:config;order:3;min-width:0;position:relative}
#rpc-app .rpc-buy{grid-area:buy;order:4;min-width:0}

/* ---------- head: dynamic title, store link, rating, facts ---------- */
#rpc-app .rpc-title{font:400 24px/1.3 var(--rpc-font-head);color:var(--rpc-ink);margin:0 0 4px;overflow-wrap:anywhere}
#rpc-app .rpc-head__dyn{display:grid;gap:6px;justify-items:start}
#rpc-app .rpc-byline{font-size:15px;color:var(--rpc-link)}
#rpc-app .rpc-rating{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;color:var(--rpc-ink)}
#rpc-app .rpc-rating__n{font-weight:400}
#rpc-app .rpc-rating__c{color:var(--rpc-link)}
#rpc-app .rpc-stars{display:inline-flex;gap:1px}
#rpc-app .rpc-star{width:18px;height:18px}
#rpc-app .rpc-star__bg{fill:#FFFFFF;stroke:var(--rpc-star-bd);stroke-width:1.4}
#rpc-app .rpc-star__fg{fill:var(--rpc-star);stroke:var(--rpc-star-bd);stroke-width:1.4}
#rpc-app .rpc-stars--lg .rpc-star{width:26px;height:26px}
#rpc-app .rpc-chips{display:flex;flex-wrap:wrap;gap:2px 18px;font-size:15px;color:var(--rpc-muted)}
#rpc-app .rpc-chips li{display:inline-flex;align-items:center;gap:4px}
#rpc-app .rpc-chips .rpc-ic{width:16px;height:16px}
#rpc-app .rpc-hr{width:100%;height:0;margin:8px 0 0;border:0;border-top:1px solid var(--rpc-divider)}

/* ---------- views: one frame, thumbnails under it ---------- */
#rpc-app .rpc-pv{display:grid;gap:10px}
#rpc-app .rpc-pv__body{display:grid;gap:10px}
#rpc-app .rpc-pv__frame{position:relative;aspect-ratio:1/1;max-width:100%;border-radius:var(--rpc-radius);overflow:hidden;background:#F3F4F4;border:1px solid var(--rpc-line)}
#rpc-app .rpc-pv__frame.is-video{background:#0F1012;border-color:#0F1012}
#rpc-app .rpc-pv__slot{position:absolute;inset:0}
#rpc-app .rpc-pv__slot[hidden],#rpc-app .rpc-pv__vid[hidden]{display:none}
#rpc-app .rpc-pv__stage{width:100%;height:100%;background:#FFFFFF}
#rpc-app .rpc-pv__stage.is-3d{background:#F3F4F4}
#rpc-app .rpc-pv__stage svg{width:100%;height:100%}
#rpc-app .rpc-pv__vid{position:absolute;inset:0}
#rpc-app .rpc-pv__vid iframe{display:block;width:100%;height:100%;border:0}
#rpc-app .rpc-pv__vidoff{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 40px;text-align:center;color:#F2F3F4}
#rpc-app .rpc-pv__vidoff-ic svg{width:66px;height:45px;color:#C4302B}
#rpc-app .rpc-pv__vidoff b{font-size:17px}
#rpc-app .rpc-pv__vidoff p{margin:0;font-size:14px;color:#C9CDD2}
#rpc-app .rpc-pv__vidoff .rpc-btn{text-decoration:none}
#rpc-app .rpc-pv__info:empty{display:none}
#rpc-app .rpc-pv__info{display:grid;gap:8px}
#rpc-app .rpc-pv__cap{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--rpc-muted)}
#rpc-app .rpc-pv__cap b{color:var(--rpc-ink)}
#rpc-app .rpc-pv__cap--video a{display:inline-flex;align-items:center;gap:4px}
/* thumbnails: square tiles, the chosen one glows (as on a marketplace gallery) */
#rpc-app .rpc-pv__views{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 4px 2px}
#rpc-app .rpc-pv__views::-webkit-scrollbar{display:none}
#rpc-app .rpc-pv__view{flex:0 0 auto;width:76px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;line-height:1.2;text-align:center;color:var(--rpc-muted)}
#rpc-app .rpc-pv__thumb{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--rpc-line);border-radius:8px;background:#FFFFFF;color:var(--rpc-ink);transition:box-shadow .12s,border-color .12s}
#rpc-app .rpc-pv__thumb svg{width:42px;height:29px}
#rpc-app .rpc-pv__view--video .rpc-pv__thumb svg{color:#C4302B}
#rpc-app .rpc-pv__view.is-on .rpc-pv__thumb{border-color:var(--rpc-glow);box-shadow:0 0 3px 2px rgba(228,121,17,.5)}
#rpc-app .rpc-pv__view.is-on{color:var(--rpc-ink)}
@media (hover:hover){#rpc-app .rpc-pv__view:hover .rpc-pv__thumb{border-color:var(--rpc-glow)}}
#rpc-app .rpc-pv__view:focus-visible{outline:none;box-shadow:none}
#rpc-app .rpc-pv__view:focus-visible .rpc-pv__thumb{outline:2px solid var(--rpc-accent);outline-offset:2px}

/* ---------- buttons (pills) ---------- */
#rpc-app .rpc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 18px;border:1px solid var(--rpc-line);border-radius:100px;background:#FFFFFF;box-shadow:0 2px 5px 0 rgba(213,217,217,.5);font:400 16px/1.2 var(--rpc-font);color:var(--rpc-ink);text-transform:var(--rpc-btn-case);letter-spacing:var(--rpc-btn-track);text-decoration:none;cursor:pointer;transition:background-color .12s,border-color .12s}
#rpc-app .rpc-btn--cta,#rpc-app .rpc-btn--cart{background:var(--rpc-cta);border-color:var(--rpc-cta-bd);color:var(--rpc-on-cta)}
#rpc-app .rpc-btn--buy{background:var(--rpc-buy);border-color:var(--rpc-buy-bd);color:var(--rpc-on-cta)}
#rpc-app .rpc-btn--sec{background:#FFFFFF}
#rpc-app .rpc-btn--block,#rpc-app .rpc-btn--xl{display:flex;width:100%}
#rpc-app .rpc-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
@media (hover:hover){
  #rpc-app .rpc-btn:not([aria-disabled="true"]):hover{background:var(--rpc-soft-2);text-decoration:none;color:var(--rpc-ink)}
  #rpc-app .rpc-btn--cta:not([aria-disabled="true"]):hover,#rpc-app .rpc-btn--cart:not([aria-disabled="true"]):hover{background:var(--rpc-cta-hover)}
  #rpc-app .rpc-btn--buy:not([aria-disabled="true"]):hover{background:var(--rpc-buy-hover)}
}
#rpc-app .rpc-link{color:var(--rpc-link);text-decoration:none;font-weight:400}
#rpc-app .rpc-link:hover{color:var(--rpc-link-hover);text-decoration:underline}

/* ---------- notices ---------- */
#rpc-app .rpc-notices:empty{display:none}
#rpc-app .rpc-notices{display:grid;gap:8px;margin-bottom:12px}
#rpc-app .rpc-notices :is(.woocommerce-error,.woocommerce-message,.woocommerce-info){list-style:none;margin:0;padding:12px 14px 12px 46px;border:1px solid var(--rpc-err);border-radius:var(--rpc-radius);box-shadow:0 0 0 4px var(--rpc-err-bg) inset;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC0C39' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") 14px 13px/20px no-repeat;color:var(--rpc-ink);font-size:15px;position:relative}
#rpc-app .rpc-notices :is(.woocommerce-error,.woocommerce-message,.woocommerce-info)::before{content:none;display:none}
#rpc-app .rpc-notices .woocommerce-message,#rpc-app .rpc-notices .woocommerce-info{border-color:var(--rpc-info-bd);background-image:none;box-shadow:none;padding-left:14px}
#rpc-app .rpc-notices li{list-style:none}
#rpc-app .rpc-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--rpc-warn-bd);border-radius:var(--rpc-radius);background:var(--rpc-warn-bg);font-size:15px;margin-bottom:12px}
#rpc-app .rpc-alert .rpc-ic{color:var(--rpc-warn-ink);margin-top:1px}
#rpc-app .rpc-alert--info{border-color:var(--rpc-info-bd);background:var(--rpc-info-bg)}
#rpc-app .rpc-alert--info .rpc-ic{color:var(--rpc-accent)}

/* ---------- step counter ---------- */
#rpc-app .rpc-prog{margin:2px 0 12px}
#rpc-app .rpc-build{margin:2px 0 4px;font:700 22px/1.25 var(--rpc-font-head);color:var(--rpc-ink)}
#rpc-app .rpc-prog__t{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:15px;color:var(--rpc-muted)}
#rpc-app .rpc-prog__t b{color:var(--rpc-ink);font-weight:700}
#rpc-app .rpc-prog__reset{margin-left:auto;font-size:15px;min-height:32px}

/* ---------- steps: one row per step, "Step: choice" like a variation picker ---------- */
#rpc-app .rpc-steps{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rpc-divider)}
#rpc-app .rpc-step{min-width:0;border-bottom:1px solid var(--rpc-divider);scroll-margin-top:calc(var(--rpc-sticky-top) + 8px)}
#rpc-app .rpc-step__head{display:flex;align-items:center;min-height:56px;position:relative;border-radius:var(--rpc-radius)}
#rpc-app .rpc-step__h{margin:0;font-size:inherit;flex:1 1 auto;min-width:0;color:inherit}
#rpc-app .rpc-step__bar{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:6px 4px;background:none;color:var(--rpc-ink);font:400 18px/1.3 var(--rpc-font-head);text-align:left}
#rpc-app .rpc-step__rest{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 6px 0 4px;cursor:pointer;font-size:15px}
#rpc-app .rpc-step__num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rpc-line);background:#FFFFFF;color:var(--rpc-ink);font:700 15px/1 var(--rpc-font)}
#rpc-app .rpc-step__title{flex:1 1 auto;min-width:0}
#rpc-app .rpc-step__val{font-weight:700}
#rpc-app .rpc-step__edit{color:var(--rpc-link)}
#rpc-app .rpc-step__go{display:inline-flex;align-items:center;gap:2px;padding:5px 8px 5px 12px;border-radius:100px;background:var(--rpc-cta);border:1px solid var(--rpc-cta-bd);font-weight:700;color:var(--rpc-on-cta);white-space:nowrap}
#rpc-app .rpc-step__go .rpc-ic{width:16px;height:16px;stroke-width:2.6}
#rpc-app .rpc-step__lock{flex:none;color:var(--rpc-locked)}
#rpc-app .rpc-step__lock .rpc-ic{width:16px;height:16px}
/* the open step */
#rpc-app .rpc-step.is-active .rpc-step__bar{font-weight:700}
#rpc-app .rpc-step.is-active .rpc-step__num{background:var(--rpc-ink);border-color:var(--rpc-ink);color:#FFFFFF}
/* the step to do next: brighter */
#rpc-app .rpc-step.is-next{border-bottom-color:transparent}
#rpc-app .rpc-step.is-next .rpc-step__head{margin:6px 0;background:var(--rpc-next);box-shadow:0 0 0 2px var(--rpc-next-bd) inset}
#rpc-app .rpc-step.is-next .rpc-step__bar{font-weight:700;padding-left:10px}
#rpc-app .rpc-step.is-next .rpc-step__num{background:var(--rpc-cta);border-color:var(--rpc-cta-bd)}
/* steps that can't be opened yet: grey */
#rpc-app .rpc-step.is-locked .rpc-step__bar{color:var(--rpc-locked);cursor:default}
#rpc-app .rpc-step.is-locked .rpc-step__rest{cursor:default}
#rpc-app .rpc-step.is-locked .rpc-step__num{background:var(--rpc-soft);border-color:var(--rpc-soft);color:var(--rpc-locked)}
@media (hover:hover){#rpc-app .rpc-step:not(.is-locked):not(.is-active) .rpc-step__bar:hover .rpc-step__title{text-decoration:underline;text-underline-offset:3px}}
#rpc-app .rpc-step__head :focus-visible{outline-offset:-2px}
#rpc-app .rpc-step__panel{padding:4px 0 20px;display:grid;gap:12px;animation:rpc-in .2s ease-out}
@keyframes rpc-in{from{opacity:.4;transform:translateY(-4px)}to{opacity:1;transform:none}}
#rpc-app .rpc-help{font-size:15px;color:var(--rpc-muted);max-width:68ch}
#rpc-app .rpc-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--rpc-info-bg);border:1px solid var(--rpc-info-bd);border-radius:var(--rpc-radius);font-size:15px}
#rpc-app .rpc-note .rpc-ic{color:var(--rpc-accent);margin-top:2px}
#rpc-app .rpc-note p{margin:0}
#rpc-app .rpc-err-t{color:var(--rpc-err);font-weight:700;font-size:15px}
#rpc-app .rpc-size__q{margin-top:4px;font-size:15px}
#rpc-app .rpc-size__q a{color:var(--rpc-link);font-weight:700}
#rpc-app .rpc-fs{min-width:0}
#rpc-app .rpc-fs[aria-invalid="true"] .rpc-card__box{border-color:var(--rpc-err)}

/* ---------- option tiles ---------- */
#rpc-app .rpc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:2px}
#rpc-app .rpc-card{display:block;position:relative;cursor:pointer;min-width:0;height:100%}
#rpc-app .rpc-cardw{position:relative;min-width:0}
#rpc-app .rpc-card__box{display:flex;flex-direction:column;gap:8px;height:100%;padding:6px 6px 10px;background:#FFFFFF;border:1px solid var(--rpc-line);border-radius:var(--rpc-radius);transition:border-color .12s,box-shadow .12s}
#rpc-app .rpc-card__media{display:grid;place-items:center;aspect-ratio:4/3;max-width:100%;background:var(--rpc-soft-2);border-radius:5px;color:var(--rpc-ink);overflow:hidden}
#rpc-app .rpc-card__media svg{width:60%;height:auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#rpc-app .rpc-card__media--img{aspect-ratio:1/1;background:#FFFFFF}
#rpc-app .rpc-card__media--img img{width:100%;height:100%;object-fit:contain}
#rpc-app .rpc-cards--image .rpc-card__media{aspect-ratio:4/3;background:#FFFFFF}
#rpc-app .rpc-cards--image .rpc-card__media svg{width:46%}
#rpc-app .rpc-cards--image .rpc-card__media--photo{aspect-ratio:1/1;background:var(--rpc-soft)}
#rpc-app .rpc-card__media--photo img{object-fit:cover}
#rpc-app .rpc-badge{justify-self:start;display:inline-block;margin-bottom:3px;padding:1px 8px;border-radius:4px;background:#232F3E;color:#FFFFFF;font-size:12px;font-weight:700}
#rpc-app .rpc-card__text{display:grid;gap:2px;padding:0 4px;min-width:0}
#rpc-app .rpc-card__name{font-size:16px;line-height:1.3;color:var(--rpc-ink);overflow-wrap:anywhere}
#rpc-app .rpc-card__help{font-size:14px;line-height:1.3;color:var(--rpc-muted)}
#rpc-app .rpc-card__check{display:none}
#rpc-app .rpc-card input:checked + .rpc-card__box{border-color:var(--rpc-accent);box-shadow:0 0 0 1px var(--rpc-accent) inset;background:var(--rpc-sel-bg)}
#rpc-app .rpc-card input:checked + .rpc-card__box .rpc-card__name{font-weight:700}
#rpc-app .rpc-card input:focus-visible + .rpc-card__box{outline:2px solid var(--rpc-accent);outline-offset:2px;box-shadow:0 0 0 4px var(--rpc-focus)}
@media (hover:hover){#rpc-app .rpc-card:hover .rpc-card__box{border-color:var(--rpc-border)}#rpc-app .rpc-card:hover input:checked + .rpc-card__box{border-color:var(--rpc-accent)}}
#rpc-app .rpc-zoom{position:absolute;top:10px;left:10px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--rpc-line);color:var(--rpc-ink)}
#rpc-app .rpc-zoom .rpc-ic{width:20px;height:20px}
/* text-only tiles (no pictures in the data) */
#rpc-app .rpc-cards--text .rpc-card__box{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;min-height:56px}
#rpc-app .rpc-cards--text .rpc-card__text{flex:1 1 auto}
#rpc-app .rpc-cards--text .rpc-card__dot{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--rpc-border);background:#FFFFFF;position:relative}
#rpc-app .rpc-cards--text input:checked + .rpc-card__box .rpc-card__dot{border-color:var(--rpc-accent)}
#rpc-app .rpc-cards--text input:checked + .rpc-card__box .rpc-card__dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--rpc-accent)}
/* measurement type */
#rpc-app .rpc-cards--mtype{grid-template-columns:repeat(2,minmax(0,1fr))}
#rpc-app .rpc-cards--mtype .rpc-card__media{aspect-ratio:4/3;background:#ECE9E4}
#rpc-app .rpc-cards--mtype.rpc-cards--image .rpc-card__media{aspect-ratio:4/3;background:#FFFFFF}
#rpc-app .rpc-cards--mtype .rpc-card__media svg{width:100%;height:100%;stroke:none}
#rpc-app .rpc-cards--mtype .rpc-card__name{font-size:17px}
/* size tiles (kept for stores that show sizes as tiles) */
#rpc-app .rpc-cards--size{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#rpc-app .rpc-cards--size .rpc-card__box{align-items:center;justify-content:center;gap:2px;padding:10px 2px;min-height:56px;text-align:center}
#rpc-app .rpc-tile__num{font:700 19px/1 var(--rpc-font);color:var(--rpc-ink);font-variant-numeric:tabular-nums}
#rpc-app .rpc-tile__tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:1px 6px;border-radius:4px;background:var(--rpc-accent);color:#FFFFFF;font-size:11px;font-weight:700;white-space:nowrap;display:none;z-index:1}
#rpc-app .rpc-card.is-suggested .rpc-card__box{border-style:dashed;border-color:var(--rpc-accent)}
#rpc-app .rpc-card.is-suggested .rpc-tile__tag{display:block}
#rpc-app .rpc-card.is-suggested input:checked + .rpc-card__box{border-style:solid}
/* colours: swatch, name, RAL */
#rpc-app .rpc-cards--swatch{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#rpc-app .rpc-cards--swatch .rpc-card__box{padding:5px 5px 8px;gap:6px}
#rpc-app .rpc-sw{display:block;aspect-ratio:1/1;max-width:100%;background:var(--sw,#ccc);border:1px solid rgba(15,17,17,.12);border-radius:5px;position:relative;overflow:hidden}
#rpc-app .rpc-sw::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.10) 0 2px,transparent 2px 9px,rgba(0,0,0,.10) 9px 10px)}
#rpc-app .rpc-cards--swatch .rpc-card__text{text-align:center;justify-items:center}
#rpc-app .rpc-cards--swatch .rpc-card__name{font-size:15px}
#rpc-app .rpc-cards--swatch .rpc-card__help{font-size:13px}

/* ---------- size: slider + exact value ---------- */
#rpc-app .rpc-size{display:grid;gap:12px;min-width:0;padding:14px;background:var(--rpc-soft-2);border:1px solid var(--rpc-line);border-radius:var(--rpc-radius)}
#rpc-app .rpc-size.is-err{border-color:var(--rpc-err)}
#rpc-app .rpc-size__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
#rpc-app .rpc-size__lbl{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:17px;color:var(--rpc-ink)}
#rpc-app .rpc-size__lbl .rpc-ic{color:var(--rpc-muted)}
#rpc-app .rpc-seg{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--rpc-line);border-radius:100px;background:#FFFFFF}
#rpc-app .rpc-seg label{position:relative;display:block;cursor:pointer}
#rpc-app .rpc-seg span{display:grid;place-items:center;min-width:44px;height:36px;padding:0 10px;border-radius:100px;font-size:15px;color:var(--rpc-ink-2)}
#rpc-app .rpc-seg input:checked + span{background:var(--rpc-ink);color:#FFFFFF;font-weight:700}
#rpc-app .rpc-seg input:focus-visible + span{outline:2px solid var(--rpc-accent);outline-offset:1px}
#rpc-app .rpc-size__val{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center}
#rpc-app .rpc-size__btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--rpc-line);border-radius:50%;background:#FFFFFF;box-shadow:0 2px 5px 0 rgba(213,217,217,.5);color:var(--rpc-ink)}
#rpc-app .rpc-size__btn .rpc-ic{width:22px;height:22px;stroke-width:2.4}
@media (hover:hover){#rpc-app .rpc-size__btn:hover{background:var(--rpc-soft-2)}}
#rpc-app .rpc-size__field{position:relative;display:flex;align-items:center;min-width:0}
#rpc-app .rpc-size__in{width:100%;min-width:0;height:48px;padding:0 46px;border:1px solid var(--rpc-border);border-radius:var(--rpc-radius);background:#FFFFFF;box-shadow:0 1px 2px rgba(15,17,17,.15) inset;font:700 24px/1 var(--rpc-font);text-align:center;color:var(--rpc-ink);font-variant-numeric:tabular-nums}
#rpc-app .rpc-size__in:focus{outline:none;border-color:var(--rpc-accent);box-shadow:0 0 0 3px var(--rpc-focus),0 1px 2px rgba(15,17,17,.15) inset}
#rpc-app .rpc-size__in::placeholder{color:#A3A8AE;opacity:1}
#rpc-app .rpc-size__u{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--rpc-muted);pointer-events:none}
#rpc-app .rpc-size__track{position:relative;min-width:0}
#rpc-app .rpc-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;--p:0%;--lim:100%}
#rpc-app .rpc-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--rpc-accent) 0,var(--rpc-accent) var(--p),transparent var(--p)),linear-gradient(to right,#D5D9D9 0,#D5D9D9 var(--lim),#F3D3B5 var(--lim),#F3D3B5 100%)}
#rpc-app .rpc-range::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--rpc-accent) 0,var(--rpc-accent) var(--p),transparent var(--p)),linear-gradient(to right,#D5D9D9 0,#D5D9D9 var(--lim),#F3D3B5 var(--lim),#F3D3B5 100%)}
#rpc-app .rpc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#FFFFFF;border:1px solid var(--rpc-border);box-shadow:0 2px 5px rgba(15,17,17,.3)}
#rpc-app .rpc-range::-moz-range-thumb{box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:#FFFFFF;border:1px solid var(--rpc-border);box-shadow:0 2px 5px rgba(15,17,17,.3)}
#rpc-app .rpc-size.is-unset .rpc-range::-webkit-slider-thumb{border-style:dashed}
#rpc-app .rpc-size.is-unset .rpc-range::-moz-range-thumb{border-style:dashed}
#rpc-app .rpc-range:focus-visible{outline:2px solid var(--rpc-accent);outline-offset:2px;border-radius:8px}
#rpc-app .rpc-size__ticks{position:relative;display:flex;justify-content:space-between;height:20px;font-size:14px;line-height:20px;color:var(--rpc-muted);font-variant-numeric:tabular-nums}
#rpc-app .rpc-size__lim{position:absolute;top:0;transform:translateX(-50%);font-weight:700;color:var(--rpc-ink);white-space:nowrap}
#rpc-app .rpc-size__lim::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:14px;margin-left:-1px;background:#5F656D;border-radius:1px}
#rpc-app .rpc-size__out{display:grid;gap:6px;min-height:44px;font-size:15px}
#rpc-app .rpc-size__out .rpc-hint{margin:0;color:var(--rpc-muted)}
#rpc-app .rpc-size__res{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--rpc-ink);font-size:17px}
#rpc-app .rpc-size__res > span{display:grid;gap:2px;min-width:0}
#rpc-app .rpc-size__res b{color:var(--rpc-ok)}
#rpc-app .rpc-size__why{font-size:15px;color:var(--rpc-muted)}

/* ---------- your selection (the subtotal box) ---------- */
#rpc-app .rpc-bx{--bk:1;display:grid;gap:calc(10px + 8px * var(--bk));padding:calc(14px + 6px * var(--bk));border:1px solid var(--rpc-line);border-radius:var(--rpc-radius);background:#FFFFFF}
#rpc-app .rpc-bx.is-ready{border-color:var(--rpc-next-bd);box-shadow:0 0 0 3px #FFE7B3}
/* the last step chosen: the outline blinks a few times (after the page has scrolled up to it) */
/* One highlight for "begin here" (step 1 on arrival), "Your selection" (the last step just chosen) and "I've checked my
   measurements" (until ticked): a soft orange outline that breathes every 2 s. --glow-b / --glow-s: the element's resting look. */
@keyframes rpc-glow{0%,100%{border-color:var(--glow-b);box-shadow:var(--glow-s)}50%{border-color:#FF8F00;box-shadow:0 0 0 4px rgba(255,164,28,.5)}}
/* the same for an element without a border of its own (step 1): a white gap, the 1 px line, the glow */
@keyframes rpc-glow-ring{0%,100%{box-shadow:0 0 0 6px #FFFFFF,0 0 0 7px var(--rpc-line),0 0 0 7px rgba(255,164,28,0)}50%{box-shadow:0 0 0 6px #FFFFFF,0 0 0 7px #FF8F00,0 0 0 11px rgba(255,164,28,.5)}}
#rpc-app .rpc-bx.is-flash{--glow-b:var(--rpc-next-bd);--glow-s:0 0 0 3px #FFE7B3;animation:rpc-glow 2s ease-in-out .3s 2}
#rpc-app .rpc-step.is-intro{border-radius:var(--rpc-radius);animation:rpc-glow-ring 2s ease-in-out infinite}
#rpc-app .rpc-buy{scroll-margin-top:calc(var(--rpc-sticky-top) + 8px)}
#rpc-app .rpc-bx__h:focus{outline:none}
#rpc-app .rpc-bx__h{font:700 19px/1.25 var(--rpc-font-head);color:var(--rpc-ink)}
#rpc-app .rpc-bx__list{display:grid;align-content:start;border-top:1px solid var(--rpc-divider)}
/* a short window: the shipping lines go (they are also under the title and in the Shipping tab) and the rows tighten */
#rpc-app .rpc-bx.is-tight{gap:8px;padding:12px 14px}
#rpc-app .rpc-bx.is-tight .rpc-bx__ship{display:none}
#rpc-app .rpc-bx.is-tight .rpc-bx__btn{padding:4px 2px;font-size:14px}
#rpc-app .rpc-bx.is-tight .rpc-warn__t{font-size:12.5px}
#rpc-app .rpc-bx__list.is-scroll{overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid var(--rpc-divider);box-shadow:inset 0 -10px 8px -8px rgba(15,17,17,.18)}
#rpc-app .rpc-bx__row{border-bottom:1px solid var(--rpc-divider)}
#rpc-app .rpc-bx__btn{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr);gap:2px 10px;width:100%;padding:calc(5px + 5px * var(--bk)) 2px;font-size:15px;line-height:1.3;text-align:left;color:var(--rpc-ink)}
/* Width and Height share one row: "Width 48″ · Height 52″" */
#rpc-app .rpc-bx__row--pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
#rpc-app .rpc-bx__row--pair .rpc-bx__btn{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
#rpc-app .rpc-bx__priced{grid-column:1 / -1;padding:0 2px calc(4px + 4px * var(--bk));font-size:13px;color:var(--rpc-muted)}
/* 0.6.1: line prices (Settings → Line prices) and the box line */
#rpc-app .rpc-bx__lp{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 2px calc(4px + 3px * var(--bk));font-size:13px;line-height:1.35;color:var(--rpc-muted)}
#rpc-app .rpc-bx__row--pair .rpc-bx__lp{grid-column:1 / -1}
#rpc-app .rpc-bx__row.has-lp{display:flex;align-items:baseline;gap:8px}#rpc-app .rpc-bx__row--box .rpc-bx__v{white-space:nowrap}#rpc-app .rpc-bx__row.has-lp>.rpc-bx__btn{flex:1;min-width:0}#rpc-app .rpc-bx__row.has-lp>.rpc-bx__lp{flex:none;padding:0 2px;font-size:14px}#rpc-app .rpc-bx__row.has-lp>.rpc-bx__lp>span:empty{display:none}
#rpc-app .rpc-bx__lp b,#rpc-app .rpc-bx__sum b{color:var(--rpc-ink);font-weight:700;white-space:nowrap}
#rpc-app .rpc-bx__sum{display:flex;justify-content:space-between;gap:8px;margin:8px 0 0;padding:6px 2px;border-top:2px solid var(--rpc-divider);font-size:14px}
#rpc-app button.rpc-bx__btn:hover .rpc-bx__v{color:var(--rpc-link-hover);text-decoration:underline}
#rpc-app .rpc-bx__k{color:var(--rpc-muted)}
#rpc-app .rpc-bx__v{font-weight:700;min-width:0;overflow-wrap:anywhere}
#rpc-app .rpc-bx__v--todo{font-weight:400;color:var(--rpc-locked)}
#rpc-app .rpc-bx__dash{color:var(--rpc-locked);line-height:1}
#rpc-app .rpc-bx__row.is-todo .rpc-bx__btn,#rpc-app .rpc-bx__half.is-todo .rpc-bx__btn{display:block;padding-top:calc(3px + 3px * var(--bk));padding-bottom:calc(3px + 3px * var(--bk))}
#rpc-app :is(.rpc-bx__row,.rpc-bx__half).is-cur .rpc-bx__v--todo{color:var(--rpc-ink)}
#rpc-app :is(.rpc-bx__row,.rpc-bx__half).is-next .rpc-bx__v--todo{color:var(--rpc-buy-bd);font-weight:700}
#rpc-app .rpc-bx__left{font-size:15px;color:var(--rpc-muted)}
#rpc-app .rpc-bx__total{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
#rpc-app .rpc-bx__tl{font-size:18px;font-weight:700}
#rpc-app .rpc-bx__tl small{font-weight:400;font-size:14px;color:var(--rpc-muted)}
#rpc-app .rpc-price{display:inline-flex;align-items:flex-start;color:var(--rpc-ink);font-variant-numeric:tabular-nums;line-height:1}
#rpc-app .rpc-price__sym,#rpc-app .rpc-price__frac{font-size:15px;line-height:1;margin-top:3px}
#rpc-app .rpc-price__whole{font-size:32px;font-weight:500;line-height:1;letter-spacing:-.01em}
#rpc-app .rpc-bx__tax{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--rpc-muted)}
#rpc-app .rpc-bx__ship{display:grid;gap:calc(3px + 5px * var(--bk));font-size:14px;line-height:1.4;color:var(--rpc-ink)}
#rpc-app .rpc-bx__ship p{display:flex;gap:8px;align-items:flex-start}
#rpc-app .rpc-bx__ship .rpc-ic{width:18px;height:18px;margin-top:2px;color:var(--rpc-muted)}
#rpc-app .rpc-bx__ship b{font-weight:700}
#rpc-app .rpc-qty{display:flex;align-items:center}
#rpc-app .rpc-qty__l{position:absolute;margin:0 0 0 14px;font-size:15px;color:var(--rpc-ink);pointer-events:none}
#rpc-app .rpc-qty__sel{-webkit-appearance:none;appearance:none;width:100%;height:36px;padding:0 34px 0 86px;border:1px solid var(--rpc-line);border-radius:var(--rpc-radius);background:var(--rpc-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;box-shadow:0 2px 5px 0 rgba(15,17,17,.15);font-size:15px;color:var(--rpc-ink);cursor:pointer}
#rpc-app .rpc-qty__sel:hover{background-color:#E3E6E6}
#rpc-app .rpc-warn{display:grid;gap:calc(6px + 4px * var(--bk));font-size:15px}
#rpc-app .rpc-warn.is-err .rpc-check{border-color:var(--rpc-err);box-shadow:0 0 0 3px var(--rpc-err-bg)}
#rpc-app .rpc-warn__t{font-size:13px;line-height:1.4;color:var(--rpc-muted)}
#rpc-app .rpc-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:10px 12px;background:var(--rpc-soft-2);border:1px solid var(--rpc-line);border-radius:var(--rpc-radius);font-size:15px;position:relative}
#rpc-app .rpc-check input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
#rpc-app .rpc-check__box{flex:none;width:20px;height:20px;margin-top:1px;border:1px solid var(--rpc-border);border-radius:3px;background:#FFFFFF;box-shadow:0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(0,0,0,.07) inset}
#rpc-app .rpc-check input:checked + .rpc-check__box{background:var(--rpc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;border-color:var(--rpc-accent)}
#rpc-app .rpc-check input:focus-visible + .rpc-check__box{outline:2px solid var(--rpc-accent);outline-offset:2px}
/* "I've checked my measurements": its outline blinks slowly until the box is ticked */
#rpc-app .rpc-check.is-due{--glow-b:var(--rpc-line);--glow-s:0 0 0 0 rgba(255,164,28,0);animation:rpc-glow 2s ease-in-out infinite}
#rpc-app .rpc-warn.is-err .rpc-check.is-due{animation-name:rpc-due-err}
@keyframes rpc-due-err{0%,100%{border-color:var(--rpc-err);box-shadow:0 0 0 2px rgba(204,12,57,.15)}50%{border-color:var(--rpc-err);box-shadow:0 0 0 5px rgba(204,12,57,.35)}}
#rpc-app .rpc-bx__btns{display:grid;gap:8px}
#rpc-app .rpc-bx__btns .rpc-btn{width:100%;min-height:calc(40px + 6px * var(--bk));font-size:16px}

/* ---------- lightbox ---------- */
#rpc-app .rpc-lb{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;background:rgba(15,17,17,.7)}
#rpc-app .rpc-lb__box{display:grid;gap:8px;width:min(620px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:12px;background:#FFFFFF;border-radius:var(--rpc-radius)}
#rpc-app .rpc-lb__box img{width:100%;height:auto;max-height:72vh;object-fit:contain;background:#FFFFFF}
#rpc-app .rpc-lb__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700}
#rpc-app .rpc-lb__close{min-height:40px;padding:0 16px;border:1px solid var(--rpc-line);border-radius:100px;box-shadow:0 2px 5px 0 rgba(213,217,217,.5)}

/* ---------- sections below: Product info, Measure & install, Shipping & production, Customer reviews ---------- */
#rpc-app .rpc-info{margin-top:28px;border-top:1px solid var(--rpc-divider)}
#rpc-app .rpc-tabs{display:none}
#rpc-app .rpc-acc__item{border-bottom:1px solid var(--rpc-divider)}
#rpc-app .rpc-acc__h{margin:0;font-size:inherit}
#rpc-app .rpc-acc__btn{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px;padding:14px 0;font:700 20px/1.3 var(--rpc-font-head);color:var(--rpc-ink)}
#rpc-app .rpc-acc__btn::after{content:"";width:12px;height:12px;margin-right:6px;border-right:2px solid var(--rpc-ink);border-bottom:2px solid var(--rpc-ink);transform:rotate(45deg) translate(-3px,-3px)}
#rpc-app .rpc-acc__item.is-open .rpc-acc__btn::after{transform:rotate(-135deg) translate(-3px,-3px)}
#rpc-app .rpc-acc__panel{display:none;padding:0 0 22px}
#rpc-app .rpc-acc__item.is-open .rpc-acc__panel{display:block}
#rpc-app .rpc-acc__in{font-size:16px;line-height:1.55;color:var(--rpc-ink)}
#rpc-app .rpc-acc__in h3{font:700 18px/1.3 var(--rpc-font-head);color:var(--rpc-ink);margin:18px 0 8px}
#rpc-app .rpc-acc__in h3:first-child{margin-top:2px}
#rpc-app .rpc-acc__in p{margin:0 0 10px;max-width:72ch}
#rpc-app .rpc-cols{display:grid;gap:8px 48px;grid-template-columns:minmax(0,1fr)}
#rpc-app .rpc-sec{margin-bottom:12px}
#rpc-app .rpc-col{min-width:0}
#rpc-app .rpc-bul{display:grid;gap:6px;margin:0 0 10px;padding-left:20px;list-style:disc}
#rpc-app .rpc-bul li{list-style:disc}
#rpc-app .rpc-spec{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);border-top:1px solid var(--rpc-divider);font-size:15px}
#rpc-app .rpc-spec dt{padding:9px 12px;background:var(--rpc-soft);font-weight:700;color:var(--rpc-ink);border-bottom:1px solid var(--rpc-divider)}
#rpc-app .rpc-spec dd{padding:9px 12px;border-bottom:1px solid var(--rpc-divider);min-width:0}
#rpc-app .rpc-spec__n{display:block;margin-top:4px;font-size:13px;color:var(--rpc-muted)}
#rpc-app .rpc-swrow{display:flex;flex-wrap:wrap;gap:6px 12px}
#rpc-app .rpc-swrow span{display:inline-flex;align-items:center;gap:6px}
#rpc-app .rpc-swrow i{width:16px;height:16px;border:1px solid var(--rpc-line);border-radius:3px;background:var(--sw)}
#rpc-app .rpc-figure{border:1px solid var(--rpc-line);border-radius:var(--rpc-radius);overflow:hidden;max-width:520px;aspect-ratio:1/1;width:100%}
#rpc-app .rpc-figure svg{width:100%;height:100%}
#rpc-app .rpc-links{display:grid;gap:4px;margin:0}
#rpc-app .rpc-links a,#rpc-app .rpc-links .rpc-link{display:inline-flex;align-items:center;gap:6px;min-height:34px}
#rpc-app .rpc-links .rpc-link svg{width:30px;height:21px;color:#C4302B}
#rpc-app .rpc-ic--ext{width:16px;height:16px}
#rpc-app .rpc-nowrap{white-space:nowrap}
/* your sizes (letters of the 3D view) */
#rpc-app .rpc-3d__key{display:grid;gap:8px;color:var(--rpc-ink)}
#rpc-app .rpc-3d__key ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
#rpc-app .rpc-3d__key li{display:inline-flex;align-items:baseline;gap:5px;padding:5px 12px;border:1px solid var(--rpc-line);border-radius:100px;background:#FFFFFF;font:700 15px/1.3 var(--rpc-font);color:var(--rpc-ink);white-space:nowrap}
#rpc-app .rpc-3d__key li b{color:var(--rpc-link)}
#rpc-app .rpc-3d__key li span{font-weight:400;font-size:14px;color:var(--rpc-muted)}
#rpc-app .rpc-3d__key p{margin:0;font-size:15px;line-height:1.5}
#rpc-app .rpc-3d__key .rpc-3d__ml{font-size:14px;color:var(--rpc-muted)}
#rpc-app .rpc-mode{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;margin:12px 0;padding:12px;background:var(--rpc-soft-2);border:1px solid var(--rpc-line);border-radius:var(--rpc-radius)}
#rpc-app .rpc-mode__art{display:block;border-radius:4px;overflow:hidden;border:1px solid var(--rpc-line)}
#rpc-app .rpc-mode__art svg{width:100%;height:auto}
#rpc-app .rpc-mode__t{display:grid;gap:6px;font-size:15px;line-height:1.45;color:var(--rpc-ink)}
#rpc-app .rpc-mode__t p{margin:0}
#rpc-app .rpc-mode__ml{font-size:14px;color:var(--rpc-muted)}
/* customer reviews */
#rpc-app .rpc-rv{display:grid;gap:8px;justify-items:start}
#rpc-app .rpc-rv__score{display:flex;align-items:center;gap:10px;font-size:18px}
#rpc-app .rpc-rv__n{font-size:15px;color:var(--rpc-muted)}
#rpc-app .rpc-rv .rpc-btn{margin-top:4px}

/* ---------- ≥640px ---------- */
@container rpc (min-width:640px){
  #rpc-app .rpc-wrap{--rpc-gutter:22px}
  #rpc-app .rpc-title{font-size:28px;line-height:36px}
  #rpc-app .rpc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  #rpc-app .rpc-cards--text{grid-template-columns:repeat(2,minmax(0,1fr))}
  #rpc-app .rpc-cards--n2,#rpc-app .rpc-cards--mtype{grid-template-columns:repeat(2,minmax(0,1fr))}
  #rpc-app .rpc-cards--n3,#rpc-app .rpc-cards--n5{grid-template-columns:repeat(3,minmax(0,1fr))}
  #rpc-app .rpc-cards--swatch{grid-template-columns:repeat(6,minmax(0,1fr))}
  #rpc-app .rpc-step__panel{padding-left:42px}
}
/* the sections below: from 640 px a tab strip with one panel at a time (as before 0.4.0); phones keep the accordion */
@container rpc (min-width:640px){
  #rpc-app .rpc-info{border-top:0}
  #rpc-app .rpc-tabs{display:flex;flex-wrap:wrap;gap:0 28px;padding:0 16px;background:var(--rpc-soft);border-top:1px solid var(--rpc-line);border-bottom:1px solid var(--rpc-line)}
  #rpc-app .rpc-tab{min-height:50px;padding:15px 0 12px;font:700 16px/1.2 var(--rpc-font-head);color:var(--rpc-muted);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
  #rpc-app .rpc-tab:hover{color:var(--rpc-ink)}
  #rpc-app .rpc-tab[aria-selected="true"]{color:var(--rpc-ink);border-bottom-color:var(--rpc-glow)}
  #rpc-app .rpc-acc{display:grid}
  #rpc-app .rpc-acc__item{border-bottom:0;grid-area:1/1;min-width:0;visibility:hidden;pointer-events:none}
  #rpc-app .rpc-acc__item.is-tab{visibility:visible;pointer-events:auto;z-index:1}
  #rpc-app .rpc-acc__h{display:none}
  #rpc-app .rpc-acc__item .rpc-acc__panel,#rpc-app .rpc-acc__item.is-open .rpc-acc__panel{display:block;padding:22px 16px 8px}
  #rpc-app .rpc-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #rpc-app .rpc-cols--one{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 3D view: canvas + overlays ---------- */
#rpc-app .rpc-pv__stage.is-3d{position:relative;touch-action:pan-y}
#rpc-app .rpc-3d{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#rpc-app .rpc-3d.is-drag{cursor:grabbing}
/* 0.8.0: what the visitor measures, in red over the 3D view (type / width / height steps); blinks slowly, still when motion is reduced */
#rpc-app .rpc-3d__hl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:none;opacity:.3}
#rpc-app .rpc-3d__hl.is-on{display:block;animation:rpc-hl 2s ease-in-out infinite;will-change:opacity}
@keyframes rpc-hl{0%,100%{opacity:.15}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){#rpc-app .rpc-3d__hl.is-on{animation:none;opacity:.35}}
#rpc-app .rpc-3d:focus-visible{outline:2px solid var(--rpc-accent);outline-offset:-2px;box-shadow:none}
#rpc-app .rpc-3d__chip{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:4px;background:rgba(255,255,255,.94);border:1px solid var(--rpc-line);font:700 12px/1.3 var(--rpc-font);letter-spacing:.3px;color:var(--rpc-ink);pointer-events:none}
#rpc-app .rpc-3d__reset{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px;border:1px solid var(--rpc-line);border-radius:100px;background:#FFFFFF;box-shadow:0 2px 5px 0 rgba(213,217,217,.5);font:400 14px/1.2 var(--rpc-font);color:var(--rpc-ink)}
#rpc-app .rpc-3d__reset .rpc-ic{width:16px;height:16px}
/* "drag to turn" stays on screen (the drawing can always be turned) */
#rpc-app .rpc-3d__hint{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.94);border:1px solid var(--rpc-line);font:400 13px/1.2 var(--rpc-font);color:var(--rpc-ink-2);pointer-events:none}
#rpc-app .rpc-3d__hint .rpc-ic{width:14px;height:14px}
#rpc-app .rpc-3d__cur{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:100px;background:rgba(255,255,255,.94);border:1px solid var(--rpc-line);font:400 13px/1.2 var(--rpc-font);color:var(--rpc-ink-2);cursor:pointer}
#rpc-app .rpc-3d__cur input{-webkit-appearance:none;appearance:none;width:96px;height:24px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
#rpc-app .rpc-3d__cur input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#D5D9D9}
#rpc-app .rpc-3d__cur input::-moz-range-track{height:6px;border-radius:3px;background:#D5D9D9}
#rpc-app .rpc-3d__cur input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:#FFFFFF;border:1px solid var(--rpc-border);box-shadow:0 1px 3px rgba(15,17,17,.3)}
#rpc-app .rpc-3d__cur input::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;border-radius:50%;background:#FFFFFF;border:1px solid var(--rpc-border);box-shadow:0 1px 3px rgba(15,17,17,.3)}
#rpc-app .rpc-3d__cur input:focus-visible{outline:2px solid var(--rpc-accent);outline-offset:2px;border-radius:6px}
@container rpc (max-width:419.98px){#rpc-app .rpc-mode{grid-template-columns:72px minmax(0,1fr);gap:10px}}
@container rpc (max-width:519.98px){#rpc-app .rpc-3d__hint{bottom:52px}} /* phones: above the Open / Closed slider, not on it */

/* ---------- one column (phones, tablets): the drawing stays pinned at the top until every step is chosen ---------- */
@container rpc (max-width:979.98px){
  #rpc-app .rpc-pvcol.is-pinned{position:sticky;top:var(--rpc-pin-top,0px);z-index:25;margin:0 calc(-1 * var(--rpc-gutter));padding:6px var(--rpc-gutter) 8px;background:var(--rpc-bg);box-shadow:0 10px 12px -12px rgba(15,17,17,.5)}
  #rpc-app .rpc-pvcol.is-pinned :is(.rpc-pv__views,.rpc-pv__info){display:none}
  #rpc-app .rpc-pvcol.is-pinned .rpc-pv__frame{height:min(32vh,320px);aspect-ratio:auto}
  #rpc-app .rpc-pvcol.is-pinned :is(.rpc-3d__chip,.rpc-3d__cur){display:none}
  #rpc-app .rpc-pvcol.is-pinned .rpc-3d__hint{bottom:8px;right:8px;font-size:12px;padding:3px 8px}
}
/* ---------- ≥980px: views | title, steps and your selection ---------- */
@container rpc (min-width:980px){
  #rpc-app .rpc-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-areas:"preview head" "preview config" "preview buy";grid-template-rows:auto auto 1fr;column-gap:28px;row-gap:14px;align-items:start}
  #rpc-app .rpc-pvcol{align-self:stretch}
  #rpc-app .rpc-pvcol .rpc-sticky{position:sticky;top:var(--rpc-sticky-top)}
  #rpc-app .rpc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  #rpc-app .rpc-cards--text,#rpc-app .rpc-cards--n2,#rpc-app .rpc-cards--mtype{grid-template-columns:repeat(2,minmax(0,1fr))}
  #rpc-app .rpc-cards--swatch{grid-template-columns:repeat(6,minmax(0,1fr))}
  #rpc-app .rpc-figure{max-width:440px}
}
/* ---------- ≥1240px: three columns, the selection box on the right ---------- */
@container rpc (min-width:1240px){
  #rpc-app .rpc-grid{grid-template-columns:minmax(0,40fr) minmax(0,33fr) minmax(300px,27fr);grid-template-areas:"preview head buy" "preview config buy";grid-template-rows:auto 1fr}
  #rpc-app .rpc-buy{align-self:stretch}
  #rpc-app .rpc-buy .rpc-sticky{position:sticky;top:var(--rpc-sticky-top)}
  #rpc-app .rpc-cards--swatch{grid-template-columns:repeat(3,minmax(0,1fr))}
  #rpc-app .rpc-step__panel{padding-left:0}
}

/* ---------- help "?" buttons, popover (wide) and bottom sheet (phones) ---------- */
#rpc-app .rpc-q{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;margin:-8px -6px -8px -2px;vertical-align:middle;color:var(--rpc-muted);background:none;border:0;cursor:pointer}
#rpc-app .rpc-q span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--rpc-border);background:#FFFFFF;font:700 13px/1 var(--rpc-font)}
#rpc-app .rpc-q[aria-expanded="true"] span{background:var(--rpc-ink);border-color:var(--rpc-ink);color:#FFFFFF}
#rpc-app .rpc-q:focus-visible{outline:2px solid var(--rpc-accent);outline-offset:-6px;box-shadow:none}
#rpc-app .rpc-step__head .rpc-q{margin:0}
#rpc-app .rpc-root{position:relative}
#rpc-app .rpc-pop{position:absolute;left:0;top:0;z-index:90;width:360px;max-width:calc(100vw - 24px);background:#FFFFFF;color:var(--rpc-ink);border:1px solid var(--rpc-line);border-radius:var(--rpc-radius);box-shadow:0 4px 16px rgba(15,17,17,.2);text-align:left;animation:rpc-in .14s ease-out}
#rpc-app .rpc-pop:focus{outline:none}
#rpc-app .rpc-pop:focus-visible{outline:2px solid var(--rpc-accent);outline-offset:2px}
#rpc-app .rpc-pop__in{position:relative;z-index:1;display:grid;gap:8px;max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain;padding:10px 16px 14px;border-radius:var(--rpc-radius);background:#FFFFFF;font-size:15px;line-height:1.5}
#rpc-app .rpc-pop__in p{margin:0}
#rpc-app .rpc-pop__in .rpc-bul{margin:0}
#rpc-app .rpc-pop__arrow{position:absolute;left:24px;width:14px;height:14px;background:#FFFFFF;border:1px solid var(--rpc-line);transform:rotate(45deg)}
#rpc-app .rpc-pop.is-below .rpc-pop__arrow{top:-8px}
#rpc-app .rpc-pop.is-above .rpc-pop__arrow{bottom:-8px}
#rpc-app .rpc-tip__bar,#rpc-app .rpc-sheet__bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
#rpc-app .rpc-tip__bar b{font-size:16px}
#rpc-app .rpc-tip__close,#rpc-app .rpc-sheet__close{display:grid;place-items:center;width:44px;height:44px;margin:-8px -10px -8px 0;color:var(--rpc-ink);border-radius:50%}
#rpc-app .rpc-tip__img{width:100%;max-width:340px;border:1px solid var(--rpc-line);border-radius:var(--rpc-radius);background:#FFFFFF}
#rpc-app .rpc-sheet{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;background:rgba(15,17,17,.55)}
#rpc-app .rpc-sheet__panel{width:100%;max-height:85vh;max-height:85dvh;overflow:auto;overscroll-behavior:contain;background:#FFFFFF;color:var(--rpc-ink);border-radius:14px 14px 0 0;padding:4px 16px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 20px rgba(0,0,0,.25);animation:rpc-up .22s ease-out}
#rpc-app .rpc-sheet__panel::before{content:"";display:block;width:40px;height:4px;margin:6px auto 2px;border-radius:2px;background:var(--rpc-line)}
#rpc-app .rpc-sheet__bar{position:sticky;top:-4px;z-index:1;padding:8px 0;background:#FFFFFF;font-size:17px}
#rpc-app .rpc-sheet__body{display:grid;gap:10px;font-size:16px;line-height:1.5}
#rpc-app .rpc-sheet__body p{margin:0}
#rpc-app .rpc-sheet__body .rpc-bul{margin:0}
@keyframes rpc-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  #rpc-app *,#rpc-app *::before,#rpc-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #rpc-app .rpc-bx.is-flash,#rpc-app .rpc-check.is-due{border-color:#FF8F00;box-shadow:0 0 0 4px rgba(255,164,28,.5)}
  #rpc-app .rpc-step.is-intro{box-shadow:0 0 0 6px #FFFFFF,0 0 0 7px #FF8F00,0 0 0 11px rgba(255,164,28,.5)}
}
/* "+" popup of option tiles: picture first, full width */
#rpc-app .rpc-tip__img--first{max-width:100%;width:100%;height:auto;border-radius:6px}
#rpc-app .rpc-sheet .rpc-tip__img--first{max-height:42vh;object-fit:cover}
/* "+" on option tiles: small and see-through (44 px tap area kept) */
#rpc-app .rpc-plus{top:8px;left:8px;width:30px;height:30px;background:rgba(255,255,255,.7);border:1px solid rgba(15,17,17,.14);color:rgba(15,17,17,.78);box-shadow:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background-color .15s,color .15s}
#rpc-app .rpc-plus::before{content:"";position:absolute;inset:-7px;border-radius:50%}
#rpc-app .rpc-plus .rpc-ic{width:16px;height:16px;stroke-width:2.4}
#rpc-app .rpc-plus[aria-expanded="true"],#rpc-app .rpc-plus:focus-visible{background:rgba(255,255,255,.95);color:var(--rpc-ink)}
@media (hover:hover){#rpc-app .rpc-plus:hover{background:rgba(255,255,255,.95);color:var(--rpc-ink)}}
/* "+" window on option tiles: centred, dimmed page behind, picture + title + description all visible without scrolling */
#rpc-app .rpc-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,17,17,.6);animation:rpc-in .16s ease-out}
#rpc-app .rpc-modal__panel{display:flex;flex-direction:column;width:min(540px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:hidden;background:#FFFFFF;color:var(--rpc-ink);border-radius:var(--rpc-radius);box-shadow:0 4px 24px rgba(0,0,0,.35)}
#rpc-app .rpc-modal__bar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:6px 14px 6px 18px;font-size:18px;background:var(--rpc-soft);border-bottom:1px solid var(--rpc-line)}
#rpc-app .rpc-modal__media{flex:0 1 auto;min-height:0;display:flex;justify-content:center;background:#FFFFFF}
#rpc-app .rpc-modal__media img{display:block;width:100%;height:auto;max-height:min(540px,calc(100vh - 230px));max-height:min(540px,calc(100dvh - 230px));object-fit:contain}
#rpc-app .rpc-modal__text{flex:none;display:grid;gap:8px;padding:14px 18px 18px;font-size:16px;line-height:1.5}
#rpc-app .rpc-modal__text p{margin:0}