:root { --oval-speed: 250ms; }

.oval-page :is(a, button, .oval-main-image, .oval-panel, .oval-tabs a) {
  transition: color var(--oval-speed) ease, background-color var(--oval-speed) ease, border-color var(--oval-speed) ease, box-shadow var(--oval-speed) ease, transform var(--oval-speed) ease, opacity var(--oval-speed) ease;
}

.oval-main-image { height:auto;aspect-ratio:1 / 1;cursor:zoom-in; }
.oval-main-image img { object-fit:contain;transform:scale(1.15); }
.oval-main-image:hover img { transform: scale(1.175); }
.oval-expand { position:absolute;top:18px;right:18px;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;background:rgba(5,25,53,.42);backdrop-filter:blur(8px);font-size:16px; }
.oval-main-image { position:relative; }
.oval-main-image:focus-visible { outline:3px solid rgba(23,101,255,.38);outline-offset:3px; }

.oval-thumbs { gap:14px; }
.oval-thumbs button { height:112px;border-color:rgba(25,74,140,.13); }
.oval-thumbs button:hover { border-color:#6fa3ff;transform:scale(1.04); }
.oval-thumbs button.is-active { border:2px solid #1765ff;box-shadow:0 7px 20px rgba(23,101,255,.17); }

.oval-sizes>a { background:#fff; }
.oval-sizes>a b { order:-1;margin:0 0 7px;color:#082d68;font-size:16px;line-height:1;font-weight:700; }
.oval-sizes>a:hover { border-color:#78a6f5;background:#f8fbff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,52,108,.08); }
.oval-sizes>a.is-current { border-color:#1765ff;background:#f3f7ff;box-shadow:0 6px 18px rgba(23,101,255,.1); }

.oval-quick-specs { padding-block:10px; }
.oval-quick-specs div { min-height:96px;padding:25px 28px; }
.oval-quick-specs dt { color:#718096;font-size:12px;letter-spacing:.02em; }
.oval-quick-specs dd { margin-top:8px;color:#082d68;font-size:17px;font-weight:700; }

.oval-actions .primary { min-width:250px;min-height:64px;padding-inline:24px;box-shadow:0 10px 24px rgba(5,46,132,.16); }
.oval-actions .primary:hover { background:#0a43aa;transform:translateY(-2px);box-shadow:0 14px 30px rgba(5,46,132,.24); }
.oval-actions a:not(.primary):hover { background:#f1f6ff;transform:translateY(-1px); }

.oval-table div { min-height:42px;align-items:center;padding:11px 14px; }
.oval-table div:nth-child(even) { background:#f5f8fc; }
.oval-table dd { color:#082d68;font-weight:600; }

.packaging-flow { display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr;align-items:center;gap:4px;margin-top:54px;text-align:center; }
.packaging-flow>div { min-width:0; }
.packaging-flow svg { width:58px;height:58px;margin:0 auto 14px;fill:none;stroke:#1765ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.packaging-flow b { display:block;font-size:13px; }
.packaging-flow p { margin:8px 0 0;color:#61718a;font-size:11px; }
.packaging-flow i { color:#1765ff;font-size:19px;font-style:normal; }
.packaging-panel>small { margin-top:52px; }

.oval-uses { position:relative;overflow:hidden;padding:0;background:linear-gradient(105deg,#fff 0%,#fbfdff 56%,#f1f6fd 100%);box-shadow:0 12px 38px rgba(12,52,108,.055); }
.oval-uses::before { content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#1765ff 0 12%,rgba(23,101,255,.08) 48%,transparent); }
.oval-uses header { display:flex;align-items:baseline;justify-content:space-between;padding:25px 30px 18px;border-bottom:1px solid #e1e8f1; }
.oval-uses header h2 { margin:0;font-size:17px; }
.oval-uses header p { order:2;margin:0;color:#1765ff;font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; }
.oval-uses>div { padding:0 12px; }
.oval-uses span { position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:13px;min-height:125px;padding:16px 18px 16px 22px;text-align:left; }
.oval-uses span::after { content:attr(data-index);position:absolute;top:16px;right:14px;color:#9bb7d8;font-size:9px;font-weight:700;letter-spacing:.12em; }
.oval-uses span i { display:grid;place-items:center;width:44px;height:44px;border:1px solid #d8e6f8;border-radius:50%;background:rgba(255,255,255,.76);box-shadow:0 5px 16px rgba(23,101,255,.07);transition:transform var(--oval-speed) ease,border-color var(--oval-speed) ease,background-color var(--oval-speed) ease; }
.oval-uses svg { width:23px;height:23px;fill:none;stroke:#1765ff;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round; }
.oval-uses span b { max-width:155px;color:#183650;font-size:14px;font-weight:600;line-height:1.35; }
.oval-uses span:hover { background:rgba(235,244,255,.54); }
.oval-uses span:hover i { border-color:#8cb6f4;background:#fff;transform:translateY(-3px); }

.oval-related a { overflow:hidden; }
.oval-related a:hover { transform:translateY(-4px);border-color:#bfd2ee;box-shadow:0 14px 34px rgba(12,52,108,.11); }
.oval-related a>img,.oval-related .related-double { transition:transform var(--oval-speed) ease; }
.oval-related a:hover>img,.oval-related a:hover .related-double { transform:scale(1.03); }
.oval-tabs a:hover { color:#0750cd; }

.oval-lightbox { position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:1fr auto;padding:34px;background:rgba(3,12,25,.96);opacity:0;visibility:hidden;transition:opacity var(--oval-speed) ease,visibility var(--oval-speed) ease;color:#fff; }
.oval-lightbox.is-open { opacity:1;visibility:visible; }
.oval-lightbox-stage { position:relative;display:grid;place-items:center;min-height:0; }
.oval-lightbox-image { max-width:min(1100px,82vw);max-height:calc(100vh - 180px);width:auto;height:auto;object-fit:contain; }
.oval-lightbox button { position:absolute;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.24);border-radius:50%;color:#fff;background:rgba(255,255,255,.07);cursor:pointer;font-size:23px; }
.oval-lightbox button:hover { background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5); }
.oval-lightbox-close { top:0;right:0; }
.oval-lightbox-prev { left:0;top:50%;transform:translateY(-50%); }
.oval-lightbox-next { right:0;top:50%;transform:translateY(-50%); }
.oval-lightbox-thumbs { display:flex;justify-content:center;gap:10px;padding-top:20px; }
.oval-lightbox-thumbs button { position:relative;width:68px;height:54px;padding:0;border-radius:3px;overflow:hidden; }
.oval-lightbox-thumbs button.is-active { border:2px solid #4c91ff;box-shadow:0 0 0 3px rgba(76,145,255,.18); }
.oval-lightbox-thumbs img { width:100%;height:100%;object-fit:cover; }
.oval-lightbox-open { overflow:hidden; }

@media(max-width:900px){.oval-main-image{height:auto;aspect-ratio:1 / 1}.oval-main-image img{transform:scale(1.1)}.oval-main-image:hover img{transform:scale(1.12)}.oval-thumbs button{height:auto;aspect-ratio:1 / 1}.packaging-flow{margin-top:35px}.oval-uses>div{grid-template-columns:repeat(3,1fr)}.oval-uses span:nth-child(4){border-left:0;border-top:1px solid #e1e8f1}.oval-uses span:nth-child(n+5){border-top:1px solid #e1e8f1}.oval-lightbox{padding:20px}.oval-lightbox-image{max-width:86vw}.oval-lightbox button{width:44px;height:44px}}
@media(max-width:650px){.oval-main-image{height:auto;aspect-ratio:1 / 1}.oval-main-image img{transform:scale(1.08)}.oval-main-image:hover img{transform:scale(1.08)}.oval-thumbs button{height:auto;aspect-ratio:1 / 1}.oval-sizes>a b{font-size:15px}.oval-quick-specs div{min-height:86px;padding:21px 22px}.packaging-flow{grid-template-columns:1fr 12px 1fr 12px 1fr}.packaging-flow svg{width:45px;height:45px}.packaging-flow b{font-size:11px}.packaging-flow p{font-size:10px}.oval-uses header{padding:22px 18px 15px}.oval-uses>div{grid-template-columns:1fr 1fr;padding:0}.oval-uses span{min-height:120px;padding-inline:18px}.oval-uses span:nth-child(3){border-top:1px solid #e1e8f1}.oval-uses span:nth-child(4){border-left:1px solid #e1e8f1}.oval-uses span:nth-child(odd){border-left:0}.oval-uses span b{font-size:13px}.oval-lightbox{padding:12px}.oval-lightbox-image{max-width:100%;max-height:calc(100vh - 140px)}.oval-lightbox-prev{left:4px}.oval-lightbox-next{right:4px}.oval-lightbox-thumbs button{width:52px;height:42px}}
@media(prefers-reduced-motion:reduce){.oval-page *,.oval-lightbox{transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Wave product technical drawing */
.wave-page .dimensions-canvas>svg{display:block;width:100%;height:100%;padding:10px}
.wave-page .dimensions-panel:hover .dimensions-canvas>svg{filter:contrast(1.04)}
.wave-page .dimensions-canvas>img{width:100%;height:100%;padding:4px;object-fit:contain;object-position:center}
.kare-page .dimensions-canvas>svg{display:block;width:100%;height:100%;padding:8px}
.kare-page .dimensions-panel:hover .dimensions-canvas>svg{filter:contrast(1.04)}
.cube-page .dimensions-canvas>svg{display:block;width:100%;height:100%;padding:8px}
.cube-page .dimensions-panel:hover .dimensions-canvas>svg{filter:contrast(1.04)}
.cube-page .cube-sizes{grid-template-columns:repeat(2,minmax(0,1fr))}
.slim-page .dimensions-canvas>svg{display:block;width:100%;height:100%;padding:8px}
.slim-page .dimensions-panel:hover .dimensions-canvas>svg{filter:contrast(1.04)}
.slim-page .slim-sizes{grid-template-columns:repeat(4,minmax(0,1fr))}
.plake-page .dimensions-canvas>svg{display:block;width:100%;height:100%;padding:8px}
.plake-page .dimensions-panel:hover .dimensions-canvas>svg{filter:contrast(1.04)}
.plake-page .plake-sizes{grid-template-columns:repeat(3,minmax(0,1fr))}
.envelope-page .dimensions-canvas>svg{display:block;width:100%;height:100%;padding:8px}
.envelope-page .dimensions-panel:hover .dimensions-canvas>svg{filter:contrast(1.04)}
.envelope-page .envelope-sizes{grid-template-columns:minmax(0,1fr);max-width:190px}
.eps-page .dimensions-canvas>svg{display:block;width:100%;height:100%;padding:8px}
.eps-page .dimensions-panel:hover .dimensions-canvas>svg{filter:contrast(1.04)}
.eps-page .eps-sizes{grid-template-columns:repeat(4,minmax(0,1fr))}
.eps-page .eps-sizes-1{grid-template-columns:minmax(0,1fr);max-width:240px}
.eps-page .eps-sizes-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:430px}
.eps-page .eps-sizes a{min-height:128px;gap:7px}
.eps-page .eps-sizes a small{font-size:10px;line-height:1.35;color:#5d6d80}
.eps-mini-box{display:block;width:46px;height:29px;border:1.5px solid #1768ed;border-radius:3px;position:relative;background:linear-gradient(145deg,#fff,#eef5ff)}
.eps-mini-box:before{content:"";position:absolute;left:5px;right:5px;top:-7px;height:8px;border:1.5px solid #1768ed;border-radius:2px;background:#fff}
.eps-variant-table dd{display:flex;justify-content:space-between;gap:14px;align-items:center}
.eps-variant-table dd span{color:#5d6d80;font-size:13px}
@media(max-width:767px){
  .eps-page .eps-sizes,
  .eps-page .eps-sizes-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .eps-page .eps-sizes-1{grid-template-columns:1fr;max-width:none}
}