:root {
  --oval-navy: #071f42;
  --oval-blue: #1263e6;
  --oval-line: rgba(23, 55, 93, 0.13);
  --oval-shadow-sm: 0 10px 28px rgba(11, 39, 76, 0.07);
  --oval-shadow-md: 0 22px 54px rgba(7, 31, 66, 0.11);
  --oval-ease: cubic-bezier(.22, .61, .36, 1);
}

/* 01 — premium product showcase */
.oval-gallery { width:100%;max-width:100%;min-width:0;overflow:hidden; }
.oval-main-image {
  width:100%;height:auto;aspect-ratio:1 / 1;
  border:1px solid rgba(255,255,255,.55);
  border-radius:16px;
  background:linear-gradient(145deg,#08182c,#0c315c);
  box-shadow:var(--oval-shadow-md),inset 0 1px 0 rgba(255,255,255,.12);
  isolation:isolate;
}
.oval-main-image::after {
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.085),transparent 30%,transparent 74%,rgba(66,137,235,.08));
}
.oval-main-image img { transition:opacity 300ms ease,transform 340ms var(--oval-ease),filter 300ms ease; }
.oval-main-image:hover img { filter:saturate(1.035) contrast(1.02); }
.oval-expand { z-index:2;width:44px;height:44px;border-color:rgba(255,255,255,.38);box-shadow:0 8px 20px rgba(0,0,0,.16); }

/* 02 — refined gallery rail */
.oval-thumbs { grid-template-columns:repeat(5,minmax(0,1fr));min-width:0;margin-top:18px; }
.oval-thumbs button { min-width:0;height:auto;aspect-ratio:1 / 1;border-radius:12px;background:#fff;box-shadow:0 5px 15px rgba(11,39,76,.035); }
.oval-thumbs button img { transition:transform 300ms var(--oval-ease),filter 300ms ease; }
.oval-thumbs button:hover img { transform:scale(1.035); }
.oval-thumbs button.is-active { box-shadow:0 8px 24px rgba(18,99,230,.18),0 0 0 1px rgba(18,99,230,.08); }

/* 03 — stronger information hierarchy */
.oval-summary { padding-top:10px; }
.oval-pill { padding:7px 15px;background:rgba(18,99,230,.09);border:1px solid rgba(18,99,230,.08);letter-spacing:.08em; }
.oval-summary h1 { max-width:680px;margin-top:22px;font-size:clamp(48px,3.45vw,62px);line-height:.98;letter-spacing:-.052em;color:var(--oval-navy); }
.oval-intro { max-width:660px;margin-top:20px;margin-bottom:42px;font-size:18px;line-height:1.7;color:#4b5f76; }
.oval-summary>h2 { margin-bottom:18px;color:#29425e;font-size:12px;letter-spacing:.115em; }

/* 04 — product configurator */
.oval-sizes { gap:12px; }
.oval-sizes>a { position:relative;height:154px;border-color:var(--oval-line);border-radius:14px;overflow:hidden; }
.oval-sizes>a::after { content:"";position:absolute;inset:auto 18px 0;height:2px;background:var(--oval-blue);transform:scaleX(0);transition:transform 280ms var(--oval-ease); }
.oval-sizes>a:hover::after,.oval-sizes>a.is-current::after { transform:scaleX(1); }
.oval-sizes>a.is-current { border-color:var(--oval-blue);background:linear-gradient(180deg,#fff 0%,#f1f6ff 100%);box-shadow:0 12px 28px rgba(18,99,230,.13); }
.oval-sizes img { transition:transform 300ms var(--oval-ease); }
.oval-sizes>a:hover img { transform:scale(1.055) translateY(-1px); }

/* 05 — specification card hierarchy */
.oval-quick-specs { padding:8px;border-color:var(--oval-line);border-radius:16px;background:rgba(255,255,255,.78);box-shadow:var(--oval-shadow-sm);backdrop-filter:blur(12px); }
.oval-quick-specs div { min-height:98px;border-color:rgba(23,55,93,.1);border-radius:9px;transition:background-color 280ms ease,transform 280ms var(--oval-ease); }
.oval-quick-specs div:hover { position:relative;z-index:1;background:#f4f8fe;transform:translateX(2px); }
.oval-quick-specs dt { font-size:11px;font-weight:500;letter-spacing:.025em; }
.oval-quick-specs dd { font-size:18px;letter-spacing:-.015em; }

/* 06 — deliberate CTA depth */
.oval-actions { gap:14px;margin-top:2px; }
.oval-actions a { position:relative;overflow:hidden;border-radius:10px;transition:transform 280ms var(--oval-ease),box-shadow 280ms ease,background-color 280ms ease; }
.oval-actions a::after { content:"";position:absolute;inset:-80% auto -80% -35%;width:24%;background:rgba(255,255,255,.2);transform:skewX(-18deg) translateX(-240%);transition:transform 500ms ease; }
.oval-actions a:hover::after { transform:skewX(-18deg) translateX(700%); }
.oval-actions .primary { min-height:66px;border-color:#063a9b;background:#073b9c;box-shadow:0 14px 34px rgba(5,46,132,.2); }
.oval-actions .primary:hover { background:#0c4fca;box-shadow:0 18px 38px rgba(5,46,132,.27); }
.oval-actions a:active { transform:translateY(0) scale(.985); }

/* 07 — Swiss technical navigation */
.oval-tabs { gap:clamp(34px,5vw,78px);margin-top:66px;padding-inline:18px; }
.oval-tabs a { position:relative;border:0!important;padding:20px 0 18px;font-size:12px;letter-spacing:.055em; }
.oval-tabs a::after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--oval-blue);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--oval-ease); }
.oval-tabs a:hover,.oval-tabs a.is-active { color:#0750cd; }
.oval-tabs a:hover::after,.oval-tabs a.is-active::after { transform:scaleX(1); }

/* 08 — unified technical panels */
.oval-details { gap:24px; }
.oval-panel { padding:32px;border-color:var(--oval-line);border-radius:16px;box-shadow:0 10px 32px rgba(11,39,76,.045);transition:transform 300ms var(--oval-ease),box-shadow 300ms ease,border-color 300ms ease; }
.oval-panel:hover { border-color:rgba(18,99,230,.2);box-shadow:var(--oval-shadow-sm); }
.oval-panel h2,.oval-uses h2,.oval-related h2 { color:var(--oval-navy);letter-spacing:.055em; }

/* 09 — technical data table */
.oval-table { border-color:rgba(23,55,93,.11);border-radius:10px; }
.oval-table div { min-height:46px;padding-block:12px;border-color:rgba(23,55,93,.085);font-size:13px;transition:background-color 260ms ease,padding-left 260ms var(--oval-ease); }
.oval-table div:nth-child(even) { background:#f4f7fb; }
.oval-table div:hover { padding-left:18px;background:#edf4fd; }
.oval-table dt { color:#36506c;font-weight:600; }
.oval-table dd { color:#102f56;font-weight:700; }

/* 10 — drawing as an engineering artifact */
.dimensions-panel { display:flex;flex-direction:column; }
.dimensions-canvas { display:grid;place-items:center;width:100%;aspect-ratio:1 / 1;margin:auto 0 0;overflow:hidden;border:1px solid rgba(23,55,93,.07);border-radius:12px;background:#fbfdff; }
.dimensions-canvas img { width:100%;height:100%;max-width:none;padding:4px;object-fit:cover;object-position:43% 50%;border-radius:0;background:none;filter:contrast(1.04);transition:filter 320ms ease; }
.dimensions-panel:hover .dimensions-canvas img { filter:contrast(1.07); }

/* 11 — packaging infographic precision */
.packaging-panel { display:grid;grid-template-rows:auto minmax(0,1fr) auto; }
.packaging-flow { min-height:0;margin:0;padding:24px 20px;grid-template-columns:1fr 38px 1fr;grid-template-rows:1fr 34px 1fr;gap:0;border:1px solid rgba(23,55,93,.07);border-radius:14px;background:#f7faff; }
.packaging-flow>div { display:flex;min-width:0;padding:0;flex-direction:column;align-items:center;justify-content:center; }
.packaging-flow>div:nth-of-type(1) { grid-column:1;grid-row:1; }
.packaging-flow>i:nth-of-type(1) { grid-column:2;grid-row:1;align-self:center; }
.packaging-flow>div:nth-of-type(2) { grid-column:3;grid-row:1; }
.packaging-flow>i:nth-of-type(2) { grid-column:3;grid-row:2;align-self:center;justify-self:center;transform:rotate(90deg); }
.packaging-flow>div:nth-of-type(3) { grid-column:1 / -1;grid-row:3; }
.packaging-flow>div>span { display:grid;width:84px;height:84px;margin-bottom:18px;place-items:center;border:1px solid rgba(23,101,255,.13);border-radius:50%;background:#fff;box-shadow:0 10px 24px rgba(11,39,76,.06); }
.packaging-flow svg { width:54px;height:54px;margin:0;transition:transform 300ms var(--oval-ease),stroke 300ms ease; }
.packaging-flow b { color:var(--oval-navy);font-size:14px; }
.packaging-flow p { margin-top:7px;font-size:12px; }
.packaging-flow i { position:relative;top:-18px;display:grid;width:28px;height:28px;place-items:center;border:1px solid rgba(23,101,255,.14);border-radius:50%;background:#fff;color:var(--oval-blue);font-size:15px;opacity:1;box-shadow:0 6px 15px rgba(11,39,76,.05); }
.packaging-flow>div:hover svg { transform:translateY(-3px);stroke:#064fc8; }
.packaging-panel>small { margin:14px 0 0;padding:15px 10px 2px;border-top:1px solid rgba(23,55,93,.09);color:#53657d;font-size:12px;line-height:1.5;text-align:center; }
.packaging-panel>small b { color:var(--oval-navy);font-weight:700; }

/* 12 — applications as quiet premium cards */
.oval-uses { border-radius:16px;box-shadow:0 14px 40px rgba(11,39,76,.06); }
.oval-uses>div { gap:6px;padding:6px 12px 12px; }
.oval-uses span { border-left:0!important;border-radius:12px; }
.oval-uses span:hover { background:#fff;box-shadow:0 10px 26px rgba(11,39,76,.075);transform:translateY(-2px); }

/* 13 — related product confidence */
.oval-related { padding-top:26px; }
.oval-related>div { gap:22px; }
.oval-related a { border-color:var(--oval-line);border-radius:16px;box-shadow:0 7px 22px rgba(11,39,76,.035); }
.oval-related a:hover { box-shadow:0 18px 42px rgba(11,39,76,.12); }
.oval-related em { display:inline-block;transition:transform 280ms var(--oval-ease),color 280ms ease; }
.oval-related a:hover em { color:#064fc8;transform:translateX(4px); }

/* 14 — quiet trust surface */
.oval-trust { margin-top:8px;border:1px solid rgba(23,55,93,.08);border-radius:16px;background:linear-gradient(110deg,#f5f8fc,#edf4fb); }
.oval-trust b { color:var(--oval-navy);letter-spacing:.035em; }

/* Keep the transition into the footer generous, without an oversized dead zone. */
.oval-page .oval-main { padding-bottom:32px; }

/* 15 — consistent focus and motion language */
.oval-page :focus-visible { outline:3px solid rgba(18,99,230,.32);outline-offset:3px; }
.oval-breadcrumb a { transition:color 250ms ease; }
.oval-breadcrumb a:hover { color:var(--oval-blue); }

@media(max-width:1100px){
  .oval-summary h1{font-size:50px}.oval-intro{font-size:17px}.oval-panel{padding:27px}.oval-sizes>a{height:148px}
}
@media(max-width:650px){
  .oval-product-top{width:100%;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr)}.oval-gallery{width:100%;max-width:100%;min-width:0}.oval-summary{width:auto;max-width:calc(100% - 36px);min-width:0}.oval-sizes{max-width:100%}.oval-main-image{width:100%;max-width:100%;height:auto;aspect-ratio:1 / 1;border-radius:0}.oval-summary h1{font-size:42px}.oval-intro{font-size:16px;margin-bottom:34px}.oval-sizes>a{height:142px}.oval-quick-specs{border-radius:14px}.oval-tabs{margin-top:46px}.oval-panel,.oval-uses,.oval-related a,.oval-trust{border-radius:14px}.oval-uses>div{gap:4px;padding:4px 8px 10px}.packaging-flow{grid-template-columns:1fr 30px 1fr;grid-template-rows:1fr 30px 1fr;gap:0;padding:22px 12px}.packaging-flow i{position:static}.packaging-panel{grid-template-rows:auto auto auto}.packaging-panel>small{margin-top:12px}.oval-page .oval-main{padding-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  .oval-page *{animation:none!important;transition-duration:.01ms!important}
}