/* Scoped adaptation of the Shelf Reference Guide installation package. */

.xf3-install-guide {
  color-scheme: light;
  --ink: #182a34; --muted: #526570; --line: #dbe5e8;
  --wash: #f1f7f8; --deep: #123d49; --blue: #0d677a;
  font: 16px/1.52 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.xf3-install-guide * { box-sizing: border-box; }
.xf3-install-guide { scroll-behavior: smooth; }
.xf3-install-guide { margin: 0; color: var(--ink); background: #fff; }
.xf3-install-guide a { color: var(--blue); }
.xf3-install-guide { max-width: 1120px; margin: auto; padding: 0 clamp(18px, 4vw, 44px); }
.xf3-install-guide .topline { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.xf3-install-guide .topline span:last-child { color: var(--blue); }
.xf3-install-guide h1, .xf3-install-guide h2, .xf3-install-guide h3 { line-height: 1.16; letter-spacing: -.025em; }
.xf3-install-guide h1 { max-width: 620px; margin: .15em 0 .25em; font-size: clamp(2.15rem, 4.3vw, 3.65rem); }
.xf3-install-guide h2 { margin: 0 0 .35em; font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
.xf3-install-guide h3 { margin: .1em 0 .4em; font-size: 1.18rem; }
.xf3-install-guide .eyebrow { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.xf3-install-guide .lede { max-width: 600px; margin: 0; color: var(--muted); font-size: 1.04rem; }
.xf3-install-guide .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: center; padding: clamp(22px, 3.5vw, 42px) 0; }
.xf3-install-guide .hero figure, .xf3-install-guide .step figure, .xf3-install-guide .fit-diagram { margin: 0; }
.xf3-install-guide .hero img { display: block; width: 100%; height: auto; max-height: 265px; object-fit: contain; background: var(--wash); border-radius: 16px; }
.xf3-install-guide .caption { display: block; margin-top: 9px; color: var(--muted); font-size: .83rem; line-height: 1.4; }
.xf3-install-guide .jump { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.xf3-install-guide .jump a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; font-weight: 700; text-decoration: none; }
.xf3-install-guide .jump a:hover { background: var(--wash); }
.xf3-install-guide .section { padding: clamp(28px, 4vw, 42px) 0; border-top: 1px solid var(--line); }
.xf3-install-guide .section-intro { max-width: 780px; margin: 0 0 17px; color: var(--muted); }
.xf3-install-guide .hardware-flow { margin-bottom: 18px; padding: clamp(15px, 2.5vw, 22px); border: 1px solid var(--line); border-radius: 16px; background: var(--wash); }
.xf3-install-guide .hardware-flow h3 { margin: 0 0 4px; }
.xf3-install-guide .hardware-flow > p { margin: 0 0 14px; color: var(--muted); }
.xf3-install-guide .diagram-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(205px, .65fr); gap: 16px; align-items: stretch; }
.xf3-install-guide .fit-diagram { position: relative; align-self: center; }
.xf3-install-guide .fit-diagram img { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; }
.xf3-install-guide .diagram-pin { position: absolute; display: grid; place-items: center; width: 25px; height: 25px; transform: translate(-50%, -50%); border: 2px solid white; border-radius: 50%; background: var(--deep); color: white; box-shadow: 0 1px 6px #123d4970; font-size: .75rem; font-weight: 800; }
.xf3-install-guide .pin-anchor { left: 72%; top: 47%; }.pin-lip { left: 58%; top: 73%; }.pin-washer { left: 49%; top: 61%; }.pin-screw { left: 44%; top: 45%; }.pin-cap { left: 32%; top: 56%; }
.xf3-install-guide .diagram-side { position: absolute; top: 10px; padding: 4px 7px; border-radius: 5px; background: #ffffffde; color: var(--deep); font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.xf3-install-guide .diagram-side.room { left: 10px; }.diagram-side.wall { right: 10px; }
.xf3-install-guide .diagram-key { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.xf3-install-guide .diagram-key li { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: .84rem; line-height: 1.35; }
.xf3-install-guide .diagram-key b, .xf3-install-guide .item-list b { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--deep); color: white; font-size: .72rem; }
.xf3-install-guide .diagram-key span { display: block; color: var(--muted); }
.xf3-install-guide .sequence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.xf3-install-guide .sequence-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
.xf3-install-guide .sequence-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #242b32; }
.xf3-install-guide .sequence-card figcaption { padding: 10px 12px 12px; font-size: .84rem; line-height: 1.42; }
.xf3-install-guide .sequence-card strong { display: block; margin-bottom: 3px; color: var(--deep); }
.xf3-install-guide .equipment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xf3-install-guide .equipment-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--wash); }
.xf3-install-guide .equipment-card img { display: block; width: 100%; height: 190px; object-fit: contain; border-radius: 10px; background: white; }
.xf3-install-guide .equipment-card img.acrylic-model { object-fit: cover; object-position: center 55%; }
.xf3-install-guide .equipment-card h3 { margin: 13px 0 3px; }
.xf3-install-guide .equipment-card p { margin: 0 0 8px; color: var(--muted); font-size: .9rem; }
.xf3-install-guide .item-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 9px 0; padding: 0; list-style: none; }
.xf3-install-guide .item-list li { display: flex; align-items: flex-start; gap: 7px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: .84rem; font-weight: 650; line-height: 1.32; }
.xf3-install-guide .note { margin-top: 16px; padding: 12px 15px; border-left: 4px solid #d3982e; border-radius: 9px; background: #fff9ea; font-size: .9rem; }
.xf3-install-guide .note strong { color: #623f00; }
.xf3-install-guide .wall-example { margin: 10px 0 22px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.xf3-install-guide .wall-example h3 { margin: 0 0 5px; }
.xf3-install-guide .wall-example p { margin: 0 0 12px; color: var(--muted); font-size: .91rem; }
.xf3-install-guide .wall-example figure { margin: 0; }
.xf3-install-guide .wall-example img { display: block; width: 100%; height: auto; border-radius: 9px; }
.xf3-install-guide .step { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 32px); align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.xf3-install-guide .step:first-of-type { border-top: 0; }
.xf3-install-guide .step:nth-of-type(even) figure { order: 2; }
.xf3-install-guide .step figure img { display: block; width: 100%; max-height: 265px; object-fit: contain; border-radius: 13px; background: var(--wash); }
.xf3-install-guide .step-copy { max-width: 570px; }
.xf3-install-guide .number { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-bottom: 5px; border-radius: 50%; background: var(--deep); color: white; font-size: .88rem; font-weight: 800; }
.xf3-install-guide .step p, .xf3-install-guide .assembly p { margin: 0; color: #344a55; }
.xf3-install-guide .assembly { margin: 16px 0; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: var(--wash); }
.xf3-install-guide .assembly h3 { margin-bottom: 8px; font-size: 1.35rem; }
.xf3-install-guide .assembly-details { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.xf3-install-guide .assembly-details li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: white; font-size: .8rem; font-weight: 700; }
.xf3-install-guide .alerts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.xf3-install-guide .alert { display: flex; gap: 11px; padding: 13px; border: 1px solid #e7d6a7; border-radius: 11px; background: #fffaf0; }
.xf3-install-guide .alert.dust { border-color: #bedbdf; background: #f5fbfc; }
.xf3-install-guide .alert-icon { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 8px; background: #fff0c4; color: #765100; font-size: 1.25rem; font-weight: 800; line-height: 1; }
.xf3-install-guide .dust .alert-icon { background: #d8eef0; color: var(--deep); }
.xf3-install-guide .alert strong { display: block; margin-bottom: 2px; line-height: 1.3; }
.xf3-install-guide .alert p { font-size: .88rem; line-height: 1.42; }
.xf3-install-guide .safety { display: flex; gap: 12px; padding: 17px 19px; border: 1px solid #e7d6a7; border-radius: 13px; background: #fffaf0; }
.xf3-install-guide .safety h3 { margin: 0 0 4px; }
.xf3-install-guide .safety p { margin: 0; color: #344a55; }
.xf3-install-guide .care { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.xf3-install-guide .care article { padding: 17px; border: 1px solid var(--line); border-radius: 13px; }
.xf3-install-guide .care p { margin: 0; color: var(--muted); }
.xf3-install-guide .footer { padding: 24px 0 38px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) {
.xf3-install-guide .hero, .xf3-install-guide .equipment, .xf3-install-guide .step, .xf3-install-guide .care, .xf3-install-guide .alerts, .xf3-install-guide .sequence-grid { grid-template-columns: 1fr; }
.xf3-install-guide .hero { gap: 14px; }
.xf3-install-guide .hero figure { order: -1; }
.xf3-install-guide .diagram-layout { grid-template-columns: 1fr; }
.xf3-install-guide .diagram-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xf3-install-guide .equipment-card img { height: 180px; }
.xf3-install-guide .step:nth-of-type(even) figure { order: 0; }
.xf3-install-guide .step figure img { max-height: 240px; }
}
@media (max-width: 430px) {
.xf3-install-guide .diagram-pin { display: none; }
.xf3-install-guide .item-list { grid-template-columns: 1fr; }
}
@media print {
.xf3-install-guide { max-width: none; }
.xf3-install-guide .hero, .xf3-install-guide .equipment-card, .xf3-install-guide .step, .xf3-install-guide .assembly, .xf3-install-guide .safety, .xf3-install-guide .sequence-card { break-inside: avoid; }
.xf3-install-guide .jump { display: none; }
.xf3-install-guide .section { padding: 20px 0; }
.xf3-install-guide .step figure img { max-height: 210px; }
}