@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
html body.single-product {
--iac-ref-dark: #14100a;
--iac-ref-dark-2: #1c170f;
--iac-ref-card: #221a11;
--iac-ref-card-2: #2c2317;
--iac-ref-cream: #f3e9d4;
--iac-ref-cream-warm: #ebdfc4;
--iac-ref-text: #f5ecda;
--iac-ref-muted: rgba(245,236,218,0.62);
--iac-ref-accent: #14b8a6;
--iac-ref-hot: #14b8a6;
--iac-ref-deep: #b66b30;
--iac-ref-line: rgba(245,236,218,0.10);
--iac-ref-display: "Instrument Serif", Georgia, serif;
--iac-ref-body: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--iac-ref-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: var(--iac-ref-dark) !important;
}
html body.single-product.iac-reference-ready .woocommerce-breadcrumb,
html body.single-product.iac-reference-ready .woostify-breadcrumb,
html body.single-product.iac-reference-ready .woostify-product-navigation,
html body.single-product.iac-reference-ready .product-navigation,
html body.single-product.iac-reference-ready .prev-next-products {
display: none !important;
}
html body.single-product .content-top,
html body.single-product.iac-reference-ready .content-top,
html body.single-product.iac-reference-ready .single-product-content-top,
html body.single-product.iac-reference-ready .site-content > .woostify-container:first-child:empty {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
html body.single-product.iac-reference-ready .product-page-container {
padding: 0 !important;
margin: 0 !important;
background: var(--iac-ref-dark) !important;
}
html body.single-product.iac-reference-ready .site-header,
html body.single-product.iac-reference-ready #masthead,
html body.single-product.iac-reference-ready .site-header + *,
html body.single-product.iac-reference-ready #masthead + * {
margin-top: 0 !important;
}
html body.single-product.iac-reference-ready #content,
html body.single-product.iac-reference-ready .site-content,
html body.single-product.iac-reference-ready .content-area,
html body.single-product.iac-reference-ready .site-main,
html body.single-product.iac-reference-ready .site-content > .woostify-container,
html body.single-product.iac-reference-ready .content-area > .woostify-container,
html body.single-product.iac-reference-ready .site-main > .woostify-container,
html body.single-product.iac-reference-ready .product-page-container > .woostify-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
background: var(--iac-ref-dark) !important;
}
html body.single-product.iac-reference-ready div.product > .woocommerce-product-gallery,
html body.single-product.iac-reference-ready div.product > .summary,
html body.single-product.iac-reference-ready div.product > .entry-summary,
html body.single-product.iac-reference-ready div.product > .product-gallery,
html body.single-product.iac-reference-ready div.product > .product-summary,
html body.single-product.iac-reference-ready div.product .product-gallery,
html body.single-product.iac-reference-ready div.product .product-summary,
html body.single-product.iac-reference-ready div.product .product-images-container,
html body.single-product.iac-reference-ready div.product .product-images,
html body.single-product.iac-reference-ready div.product .product-group-btns,
html body.single-product.iac-reference-ready div.product > .woocommerce-tabs,
html body.single-product.iac-reference-ready .woocommerce-tabs,
html body.single-product.iac-reference-ready .woocommerce-Tabs-panel,
html body.single-product.iac-reference-ready .woocommerce-tabs-wrapper,
html body.single-product.iac-reference-ready .related.products,
html body.single-product.iac-reference-ready section.related,
html body.single-product.iac-reference-ready .up-sells,
html body.single-product.iac-reference-ready .cross-sells,
html body.single-product.iac-reference-ready .iac-ref-desc {
display: none !important;
}
html body.single-product.iac-reference-ready div.product {
display: block !important;
float: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.iac-ref-product,
.iac-ref-product * {
box-sizing: border-box;
}
.iac-ref-product {
display: block !important;
clear: both !important;
position: relative !important;
left: auto !important;
right: auto !important;
flex: none !important;
width: 100vw !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
color: var(--iac-ref-text);
background: var(--iac-ref-dark);
font-family: var(--iac-ref-body);
-webkit-font-smoothing: antialiased;
font-size: 15px;
line-height: 1.55;
letter-spacing: 0;
}
.iac-ref-hero {
position: relative;
overflow: hidden;
width: 100vw !important;
max-width: none !important;
min-height: calc(100vh - 82px);
background:
radial-gradient(70% 80% at 32% 48%, rgba(216, 138, 74, 0.08), transparent 68%),
linear-gradient(145deg, #0b0908 0%, #000000 68%, #080604 100%);
}
.iac-ref-smoke-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.12);
pointer-events: none;
z-index: 0;
filter: contrast(1.16) brightness(0.9) saturate(0.9);
transition: opacity 1200ms ease;
will-change: opacity;
}
.iac-ref-smoke-video.is-visible {
opacity: 0.68;
}
.iac-ref-smoke-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
mix-blend-mode: screen;
filter: contrast(1.18) brightness(1.04) saturate(0.92);
}
.iac-ref-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
radial-gradient(70% 60% at 38% 55%, rgba(20,184,166,0.10), transparent 62%),
radial-gradient(110% 90% at 50% 50%, transparent 36%, rgba(0,0,0,0.72) 100%);
}
.iac-ref-nav {
position: absolute;
top: 62px;
right: max(40px, calc((100vw - 1320px) / 2 + 40px));
z-index: 5;
display: flex;
align-items: center;
gap: 18px;
font-family: var(--iac-ref-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--iac-ref-muted);
}
.iac-ref-nav a {
display: inline-flex;
align-items: center;
gap: 7px;
color: inherit !important;
text-decoration: none !important;
transition: color 0.2s ease, transform 0.2s ease;
}
.iac-ref-nav a:hover {
color: var(--iac-ref-accent) !important;
transform: translateY(-1px);
}
.iac-ref-nav svg {
width: 17px;
height: 17px;
display: block;
}
.iac-ref-nav path {
fill: currentColor !important;
}
.iac-ref-nav-sep {
opacity: 0.38;
}
.iac-ref-grid {
position: relative;
z-index: 3;
width: min(calc(100% - 56px), 1320px);
min-height: calc(100vh - 82px);
margin: 0 auto;
padding: 58px 0 64px;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 56px;
align-items: stretch;
}
.iac-ref-stage-wrap {
min-width: 0;
}
.iac-ref-stage {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 18px;
overflow: hidden;
cursor: crosshair;
max-width: 620px;
margin: 0 auto;
background: rgba(8,8,7,0.18);
}
.iac-ref-product-img {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
overflow: hidden;
transform: translate3d(var(--iac-ref-img-x, 0px), var(--iac-ref-img-y, 0px), 0);
transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.iac-ref-product-img img {
width: 88% !important;
height: 88% !important;
max-width: 88% !important;
max-height: 88% !important;
object-fit: contain;
object-position: center center;
border: 0 !important;
background: transparent !important;
filter: brightness(1.04) contrast(1.03) drop-shadow(0 32px 60px rgba(0,0,0,0.65))
drop-shadow(0 0 42px rgba(20,184,166,0.18));
}
.iac-ref-product-placeholder {
width: min(78%, 440px);
aspect-ratio: 1;
display: grid;
place-items: center;
border: 1px dashed rgba(20, 184, 166, 0.42);
border-radius: 24px;
background: radial-gradient(circle at 50% 38%, rgba(20, 184, 166, 0.14), rgba(8, 8, 7, 0.24) 62%);
color: var(--iac-ref-muted);
font-family: var(--iac-ref-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.iac-ref-product-img::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 50% 50%, rgba(245,236,218,0.08), transparent 44%),
transparent;
}
.iac-ref-stage-chip {
position: absolute;
left: 24px;
bottom: 24px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--iac-ref-line);
background: rgba(20,16,10,0.58);
color: var(--iac-ref-muted);
backdrop-filter: blur(8px);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.iac-ref-stage-chip::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #aef39d;
box-shadow: 0 0 14px rgba(174,243,157,0.9);
}
.iac-ref-stage-chip.is-out::before {
background: #ef6d52;
box-shadow: 0 0 14px rgba(239,109,82,0.9);
}
.iac-ref-zoom {
position: absolute;
top: auto;
right: 10px;
bottom: 10px;
z-index: 6;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid var(--iac-ref-line);
border-radius: 999px;
background: rgba(20,16,10,0.62);
color: var(--iac-ref-text);
cursor: pointer;
backdrop-filter: blur(10px);
transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.iac-ref-zoom:hover {
background: rgba(20,184,166,0.34);
color: #fff;
transform: translateY(-1px);
}
.iac-ref-zoom svg {
width: 18px;
height: 18px;
display: block;
}
.iac-ref-lightbox {
position: fixed;
inset: 0;
z-index: 99998;
display: grid;
place-items: center;
padding: clamp(20px, 4vw, 60px);
background: rgba(0,0,0,0.88);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.iac-ref-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.iac-ref-lightbox img {
max-width: min(1100px, 92vw);
max-height: 88vh;
object-fit: contain;
filter: drop-shadow(0 34px 80px rgba(0,0,0,0.72));
}
.iac-ref-lightbox-close {
position: absolute;
top: 24px;
right: 24px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid rgba(245,236,218,0.22);
border-radius: 999px;
background: rgba(20,16,10,0.74);
color: var(--iac-ref-text);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.iac-ref-thumbs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 16px;
}
.iac-ref-thumb {
aspect-ratio: 1 / 1;
border: 1px solid var(--iac-ref-line);
border-radius: 10px;
background: linear-gradient(135deg, #221a11, #14100a);
overflow: hidden;
}
.iac-ref-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.iac-ref-info {
min-width: 0;
width: min(100%, 720px);
max-width: 720px;
align-self: center;
padding-top: clamp(18px, 3.6vh, 54px);
word-break: normal !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
}
.iac-ref-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--iac-ref-accent);
font-family: var(--iac-ref-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 22px;
}
.iac-ref-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--iac-ref-accent);
}
.iac-ref-eyebrow-tag {
padding: 3px 8px;
border: 1px solid rgba(20,184,166,0.4);
border-radius: 4px;
color: var(--iac-ref-accent);
font-size: 10px;
}
.iac-ref-title {
margin: 0 0 14px;
color: var(--iac-ref-text);
font-family: var(--iac-ref-display);
font-size: clamp(52px, 4vw, 70px);
font-weight: 400;
line-height: 1.02;
letter-spacing: 0;
text-wrap: balance;
word-break: normal !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.iac-ref-summary {
max-width: 58ch;
margin: 0 0 22px;
color: var(--iac-ref-muted);
font-size: 17px;
font-weight: 600;
line-height: 1.6;
text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.iac-ref-subtitle {
margin: 0 0 18px;
color: var(--iac-ref-muted);
font-family: var(--iac-ref-display);
font-size: 22px;
font-style: italic;
line-height: 1.2;
}
.iac-ref-specs {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--iac-ref-line);
border-bottom: 1px solid var(--iac-ref-line);
margin-bottom: 22px;
}
.iac-ref-spec {
padding: 16px 0;
border-right: 1px solid var(--iac-ref-line);
}
.iac-ref-spec--login {
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.iac-ref-spec--login:hover {
background: rgba(20,184,166,0.10);
}
.iac-ref-spec--login:hover strong {
color: var(--iac-ref-accent);
}
.iac-ref-spec--login.is-price {
cursor: default;
}
.iac-ref-spec--login.is-price:hover {
background: transparent;
}
.iac-ref-spec--login.is-price:hover strong {
color: var(--iac-ref-text);
}
.iac-ref-spec--login strong .amount,
.iac-ref-price .amount {
color: inherit !important;
font: inherit !important;
}
.iac-ref-product.is-logged-in .iac-ref-msrp-hint { display: block !important; }
.iac-ref-spec:nth-child(n+2) {
padding-left: 18px;
}
.iac-ref-spec:last-child {
border-right: 0;
}
.iac-ref-spec small {
display: block;
margin-bottom: 7px;
color: var(--iac-ref-muted);
font-family: var(--iac-ref-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.iac-ref-spec strong {
display: block;
color: var(--iac-ref-text);
font-family: var(--iac-ref-display);
font-size: 34px;
font-weight: 400;
line-height: 1;
}
.iac-ref-login-toast {
position: fixed;
left: 50%;
bottom: 34px;
z-index: 99999;
transform: translate3d(-50%, 24px, 0);
opacity: 0;
pointer-events: none;
padding: 15px 22px;
border: 1px solid rgba(20,184,166,0.42);
border-radius: 999px;
background: rgba(20,16,10,0.92);
color: var(--iac-ref-text);
box-shadow: 0 22px 60px rgba(0,0,0,0.46);
backdrop-filter: blur(14px);
font-family: var(--iac-ref-body);
font-size: 16px;
font-weight: 700;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.iac-ref-login-toast.is-visible {
opacity: 1;
transform: translate3d(-50%, 0, 0);
}
.iac-ref-price {
margin-bottom: 20px;
color: var(--iac-ref-text);
font-family: var(--iac-ref-display);
font-size: 36px;
}
.iac-ref-price .price,
.iac-ref-price .price * {
color: var(--iac-ref-text) !important;
}
.iac-ref-price-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.iac-ref-price-locked {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--iac-ref-text);
font-family: var(--iac-ref-display);
font-size: 28px;
line-height: 1;
}
.iac-ref-price-locked svg {
color: var(--iac-ref-accent);
flex: 0 0 auto;
}
.iac-ref-msrp-hint {
color: var(--iac-ref-muted);
font-family: var(--iac-ref-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
}
.iac-ref-cta-row {
display: grid;
grid-template-columns: minmax(206px, auto) minmax(230px, 270px) 50px;
gap: 12px;
align-items: stretch;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px dashed var(--iac-ref-line);
}
.iac-ref-qty {
height: 50px;
display: flex;
align-items: center;
overflow: hidden;
border: 1px solid var(--iac-ref-line);
border-radius: 999px;
background: rgba(245,236,218,0.04);
}
.iac-ref-qty button {
width: 48px;
height: 100%;
border: 0;
border-radius: 0 !important;
background: transparent !important;
color: var(--iac-ref-text) !important;
font-size: 18px;
font-weight: 800;
cursor: pointer;
box-shadow: none !important;
padding: 0 !important;
}
.iac-ref-qty input {
width: 54px;
height: 100%;
border: 0;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: var(--iac-ref-text) !important;
font-family: var(--iac-ref-display);
font-size: 22px;
text-align: center;
outline: 0;
box-shadow: none !important;
padding: 0 !important;
}
html body.single-product.iac-reference-ready .iac-ref-product .iac-ref-qty input.iac-ref-q-input,
html body.single-product.iac-reference-ready .iac-ref-product .iac-ref-qty input[type="text"].iac-ref-q-input {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: var(--iac-ref-text) !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.iac-ref-qty-unit {
height: 100%;
display: grid;
place-items: center;
padding: 0 16px 0 10px;
border-left: 1px solid var(--iac-ref-line);
color: var(--iac-ref-muted);
font-family: var(--iac-ref-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.iac-ref-inquiry-btn,
.iac-ref-save-btn {
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
cursor: pointer;
padding: 0 !important;
}
.iac-ref-inquiry-btn {
min-width: 230px;
border-radius: 999px;
background: var(--iac-ref-accent);
color: var(--iac-ref-dark);
font-family: var(--iac-ref-body);
font-size: 14px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 18px 38px -16px rgba(20,184,166,0.8);
}
.iac-ref-save-btn {
width: 50px;
border: 1px solid var(--iac-ref-line);
border-radius: 999px;
background: rgba(245,236,218,0.04) !important;
color: var(--iac-ref-text) !important;
box-shadow: none !important;
}
.iac-ref-save-btn svg {
width: 16px;
height: 16px;
}
.iac-ref-actions .iac-ref-qty button,
.iac-ref-actions .iac-ref-save-btn {
background: rgba(245,236,218,0.04) !important;
color: var(--iac-ref-text) !important;
box-shadow: none !important;
}
.iac-ref-actions .iac-ref-qty button {
background: transparent !important;
}
.iac-ref-actions .iac-ref-inquiry-btn {
background: var(--iac-ref-accent) !important;
color: var(--iac-ref-dark) !important;
}
.iac-ref-actions form.cart {
display: none !important;
}
.iac-ref-actions form.cart {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 26px;
}
.iac-ref-actions .quantity input {
height: 56px;
border: 1px solid var(--iac-ref-line) !important;
border-radius: 999px !important;
background: rgba(245,236,218,0.04) !important;
color: var(--iac-ref-text) !important;
}
.iac-ref-actions button,
.iac-ref-actions .button {
min-height: 56px;
border: 0 !important;
border-radius: 999px !important;
background: var(--iac-ref-accent) !important;
color: var(--iac-ref-dark) !important;
font-weight: 900 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 28px !important;
box-shadow: 0 12px 28px -10px rgba(20,184,166,0.7);
}
.iac-ref-meta {
display: grid;
grid-template-columns: 86px 1fr;
gap: 10px 18px;
padding-top: 0;
border-top: 0;
color: var(--iac-ref-muted);
font-family: var(--iac-ref-mono);
font-size: 12px;
}
.iac-ref-meta b {
color: var(--iac-ref-muted);
font-family: var(--iac-ref-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.iac-ref-meta span,
.iac-ref-meta a {
color: var(--iac-ref-text);
font-family: var(--iac-ref-body);
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
}
.iac-ref-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.iac-ref-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 10px;
border: 1px solid rgba(245,236,218,0.16);
border-radius: 999px;
background: rgba(245,236,218,0.06);
color: var(--iac-ref-text) !important;
font-family: var(--iac-ref-mono) !important;
font-size: 11px !important;
letter-spacing: 0.05em;
text-transform: lowercase;
}
.iac-ref-desc {
display: none !important;
background: var(--iac-ref-cream);
color: #1c170f;
padding: clamp(50px, 6vw, 76px) 0;
}
.iac-ref-desc-inner {
width: min(calc(100% - 56px), 1180px);
margin: 0 auto;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: clamp(30px, 5vw, 58px);
}
.iac-ref-desc-label {
color: rgba(28,23,15,0.54);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.iac-ref-desc-content h2,
.iac-ref-desc-content h3 {
color: #1c170f;
font-family: var(--iac-ref-display);
font-weight: 400;
letter-spacing: 0;
}
.iac-ref-desc-content h2 {
margin: 0 0 18px;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.05;
}
.iac-ref-desc-content p {
max-width: 72ch;
color: rgba(28,23,15,0.72);
font-size: 14px;
line-height: 1.75;
}
.iac-ref-related {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 16% 0%, rgba(20,184,166,0.12), transparent 30%),
radial-gradient(circle at 86% 18%, rgba(245,236,218,0.06), transparent 28%),
linear-gradient(180deg, #14100a 0%, #080706 100%);
color: var(--iac-ref-text);
padding: clamp(34px, 4.2vw, 56px) 0;
border-top: 1px solid rgba(245,236,218,0.08);
}
.iac-ref-related-inner {
width: min(calc(100% - 56px), 1320px);
margin: 0 auto;
}
.iac-ref-related-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin-bottom: 18px;
}
.iac-ref-related-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: var(--iac-ref-accent);
font-family: var(--iac-ref-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.iac-ref-related-kicker::before {
content: "";
width: 28px;
height: 1px;
background: var(--iac-ref-accent);
}
.iac-ref-related-title {
margin: 0;
color: var(--iac-ref-text);
font-family: var(--iac-ref-display);
font-size: clamp(34px, 3.7vw, 52px);
font-weight: 400;
line-height: 1;
}
.iac-ref-related-note {
max-width: 34ch;
margin: 0;
color: var(--iac-ref-muted);
font-size: 14px;
line-height: 1.6;
}
.iac-ref-related-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.iac-ref-related-card {
min-width: 0;
display: grid;
grid-template-rows: auto 1fr;
border: 1px solid rgba(245,236,218,0.12);
border-radius: 14px;
overflow: hidden;
background: rgba(245,236,218,0.045);
color: var(--iac-ref-text);
text-decoration: none !important;
transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.iac-ref-related-card:hover {
transform: translateY(-4px);
border-color: rgba(20,184,166,0.55);
background: rgba(245,236,218,0.07);
}
.iac-ref-related-img {
aspect-ratio: 1.12 / 1;
display: grid;
place-items: center;
min-width: 0;
min-height: 0;
overflow: hidden;
background:
radial-gradient(circle at 50% 50%, rgba(245,236,218,0.10), transparent 48%),
linear-gradient(135deg, #221a11, #071311);
}
.iac-ref-related-img img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
box-sizing: border-box;
object-fit: contain !important;
object-position: center center !important;
padding: 12px;
filter: drop-shadow(0 18px 34px rgba(0,0,0,0.55));
}
.iac-ref-related-body {
padding: 12px 14px 14px;
}
.iac-ref-related-category {
display: block;
margin-bottom: 8px;
color: var(--iac-ref-accent);
font-family: var(--iac-ref-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.iac-ref-related-name {
display: block;
min-height: 2.35em;
color: var(--iac-ref-text);
font-family: var(--iac-ref-display);
font-size: 21px;
font-weight: 400;
line-height: 1.08;
}
.iac-ref-related-price {
display: inline-flex;
margin-top: 10px;
color: var(--iac-ref-muted);
font-size: 13px;
font-weight: 700;
}
@media (max-width: 980px) {
.iac-ref-hero,
.iac-ref-grid {
min-height: auto;
}
.iac-ref-grid,
.iac-ref-desc-inner {
grid-template-columns: 1fr;
}
.iac-ref-grid {
gap: 28px;
padding: 70px 0 42px;
align-items: start;
}
.iac-ref-stage {
width: 100%;
margin: 0 auto;
}
.iac-ref-info {
width: 100%;
max-width: none;
margin: 0 auto;
padding-top: 0;
}
.iac-ref-specs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.iac-ref-spec {
min-width: 0;
padding: 14px 8px 14px 0;
}
.iac-ref-spec:nth-child(n+2) {
padding-left: 10px;
}
.iac-ref-spec small {
font-size: clamp(8px, 2.2vw, 10px);
letter-spacing: 0.12em;
}
.iac-ref-spec strong {
font-size: clamp(22px, 6vw, 30px);
overflow-wrap: anywhere;
}
.iac-ref-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.iac-ref-related-head {
display: block;
}
.iac-ref-cta-row {
grid-template-columns: minmax(0, 1fr) 50px;
gap: 10px;
}
.iac-ref-price-row {
align-items: flex-start;
flex-direction: column;
}
.iac-ref-qty {
grid-column: 1 / -1;
width: 100%;
}
.iac-ref-inquiry-btn {
min-width: 0;
width: 100%;
}
}
@media (max-width: 560px) {
.iac-ref-grid,
.iac-ref-desc-inner {
width: min(calc(100% - 28px), 720px);
}
.iac-ref-grid {
padding-top: 58px;
gap: 22px;
}
.iac-ref-stage {
width: 100%;
max-width: none;
aspect-ratio: 1 / 1;
}
.iac-ref-product-img {
inset: 0;
}
.iac-ref-specs {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 18px;
}
.iac-ref-title {
font-size: clamp(38px, 11vw, 52px);
}
.iac-ref-info {
padding-top: 0;
}
.iac-ref-summary {
font-size: 15px;
margin-bottom: 18px;
}
.iac-ref-subtitle {
font-size: 19px;
}
.iac-ref-price-locked {
font-size: clamp(24px, 7vw, 30px);
}
.iac-ref-meta {
grid-template-columns: 1fr;
gap: 7px;
}
.iac-ref-qty {
height: 52px;
}
.iac-ref-qty button {
width: 25%;
}
.iac-ref-qty input {
width: 25%;
font-size: 22px;
}
.iac-ref-qty-unit {
width: 25%;
padding: 0;
}
.iac-ref-inquiry-btn {
height: 54px;
font-size: 13px;
}
.iac-ref-save-btn {
width: 54px;
height: 54px;
}
.iac-ref-nav {
top: 18px;
right: 18px;
font-size: 10px;
gap: 10px;
}
.iac-ref-related-inner {
width: min(calc(100% - 28px), 720px);
}
.iac-ref-related-grid {
grid-template-columns: 1fr;
}
}