/* Real-product shelf. Existing A/B brand palettes remain unchanged. */
#products { --oil-ink:#272e30; --oil-accent:#aa8150; --oil-surface:#fff; --oil-border:#deded6; }
.design-b #products { --oil-ink:#4d1223; --oil-accent:#59071e; --oil-surface:#fff; --oil-border:#dfd4d7; }
.oil-catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:28px 0 20px; flex-wrap:wrap; }
#products .product-filter, #products .product-filters { margin:0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; width:auto; border:0; padding:0; }
#products [data-filter] { min-height:46px; padding:10px 18px; font:inherit; font-size:16px; font-weight:650; border:1px solid var(--oil-border); border-radius:999px; color:var(--oil-ink); background:transparent; cursor:pointer; white-space:nowrap; }
#products [data-filter][aria-pressed="true"] { background:var(--oil-ink); color:white; border-color:var(--oil-ink); }
.oil-rail-controls { display:flex; align-items:center; gap:8px; }
.oil-rail-controls button { min-width:48px; min-height:46px; border:1px solid var(--oil-border); border-radius:50px; padding:10px 15px; background:transparent; color:var(--oil-ink); font:inherit; font-size:14px; cursor:pointer; }
.oil-rail-controls button:hover { background:white; }
.oil-rail { position:relative; border-top:1px solid var(--oil-border); border-bottom:1px solid var(--oil-border); padding:32px 0 26px; }
.oil-rail-viewport { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; scroll-behavior:auto; }
.oil-rail-viewport::-webkit-scrollbar { display:none; }
.oil-rail-track { display:flex; width:max-content; align-items:stretch; }
.oil-rail-group { display:flex; flex:none; gap:24px; width:max-content; padding-right:24px; }
.oil-product { flex:0 0 226px; width:226px; min-width:0; position:relative; margin:0; padding:0; color:var(--oil-ink); }
.oil-product[hidden] { display:none !important; }
.oil-product-image { height:302px; display:flex; align-items:center; justify-content:center; position:relative; margin:0 0 22px; padding:12px 10px 6px; border-radius:8px; background:var(--oil-surface); }
.oil-product-image::after { content:""; position:absolute; bottom:7px; left:18%; width:64%; height:10px; background:rgba(22,30,23,.08); border-radius:50%; filter:blur(7px); z-index:0; }
.oil-product-image img { width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:1; transform-origin:bottom center; transition:transform .3s ease; }
.oil-product:hover .oil-product-image img { transform:translateY(-5px); }
.oil-product-meta { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:14px; line-height:1.5; color:#666e63; }
.oil-product-meta .oil-volume { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--oil-ink); font-weight:600; }
.oil-product-name-row { display:flex; align-items:center; gap:10px; margin:8px 0 0; min-height:61px; }
.oil-product h3 { flex:1; min-width:0; font-family:inherit; font-size:21px; font-weight:750; line-height:1.45; letter-spacing:-.045em; margin:0; min-height:0; overflow-wrap:anywhere; }
.oil-product-blend { color:#6c6063; margin:8px 0 0; font-size:14px; line-height:1.45; letter-spacing:-.035em; }


#products .oil-product .add-cart { position:static; flex:none; white-space:nowrap; width:auto; min-width:64px; min-height:44px; padding:8px 12px; border-radius:6px; border:1px solid var(--oil-border); background:transparent; color:var(--oil-ink); font-family:inherit; font-size:16px; font-weight:650; cursor:pointer; }
#products .oil-product .add-cart:hover { background:var(--oil-ink); border-color:var(--oil-ink); color:white; }
.oil-catalog-bottom { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; margin-top:17px; color:#6c6063; font-size:15px; line-height:1.6; }
.oil-catalog-bottom p { margin:0; }
.oil-catalog-bottom b { color:var(--oil-ink); font-weight:650; }
#products .supply-grid, #products .product-grid { display:block; margin-top:32px; }
#products .supply-budget, #products .budget-card { width:100%; max-width:none; margin:0; border-radius:12px; }
.oil-budget-inner { display:grid; grid-template-columns:1fr 1.05fr 1fr; gap:30px; align-items:center; }
.oil-budget-inner .eyebrow { font-size:14px; margin-bottom:10px; }
.oil-budget-inner h3 { font-size:27px !important; line-height:1.4; margin:0 0 12px; }
.oil-budget-inner label { font-size:15px !important; line-height:1.7; }
.oil-budget-inner dl { margin:0 !important; font-size:16px; }
.oil-budget-inner dt, .oil-budget-inner dd { font-size:16px !important; line-height:1.6; }
.oil-budget-inner dl > div { display:flex; justify-content:space-between; gap:12px; padding:12px 0; }
.oil-budget-inner dd { margin:0; white-space:nowrap; }
.oil-budget-inner .budget-total { margin:0 0 14px; padding-top:0; border:0; }
.oil-budget-inner .budget-total > span { font-size:15px !important; }
.oil-budget-inner .budget-total strong { font-size:38px !important; }
.oil-budget-inner .button { font-size:16px; min-height:48px; }
#products .supply-budget > .small-note, #products .budget-card > .note { margin:20px 0 0; font-size:14px; }
.oil-cart-line { display:flex !important; align-items:center; gap:15px; padding:16px 0; border-bottom:1px solid #e4e6dd; }
.oil-cart-line img { width:56px; height:78px; object-fit:contain; flex:none; }
.oil-cart-line > div { flex:1; min-width:0; }
.oil-cart-line strong { display:block; font-size:18px; line-height:1.5; }
.oil-cart-line p { font-size:15px; line-height:1.6; margin:4px 0 0; color:#715d63; }
.oil-cart-line button { min-width:50px; min-height:44px; font:inherit; font-size:14px; background:none; border:1px solid #dcded5; border-radius:6px; cursor:pointer; }
.oil-cart-line button:focus-visible, #products button:focus-visible, .oil-rail-viewport:focus-visible { outline:3px solid var(--oil-accent,#aa8150); outline-offset:4px; }
@media(min-width:1600px) { .oil-product { flex-basis:244px; width:244px; } .oil-product-image { height:322px; } }
@media(max-width:900px) { .oil-budget-inner { grid-template-columns:1fr 1fr; gap:24px; } .oil-budget-result { grid-column:1 / -1; display:flex; gap:24px; align-items:center; justify-content:space-between; } .oil-budget-result .button { width:auto; min-width:240px; } .oil-budget-result .budget-total { margin:0; } .oil-product { flex-basis:210px; width:210px; } .oil-product-image { height:285px; } }
@media(max-width:600px) { .oil-catalog-toolbar { gap:14px; margin-top:22px; } #products [data-filter] { padding:9px 13px; font-size:15px; min-height:44px; } .oil-rail-controls { margin-left:auto; } .oil-rail-controls button { font-size:14px; min-height:42px; padding:8px 12px; } .oil-rail { padding:22px 0; } .oil-product { flex-basis:194px; width:194px; } .oil-rail-group { gap:18px; padding-right:18px; } .oil-product-image { height:256px; margin-bottom:18px; } .oil-product-name-row { min-height:58px; } .oil-product h3 { font-size:20px; } .oil-product-blend { font-size:14px; } .oil-budget-inner { grid-template-columns:1fr; gap:20px; } .oil-budget-result { grid-column:auto; display:block; } .oil-budget-result .button { width:100%; min-width:0; margin-top:16px; } .oil-budget-inner h3 { font-size:25px !important; } .oil-catalog-bottom { font-size:14px; gap:9px; } }
@media(prefers-reduced-motion:reduce) { .oil-product-image img { transition:none; } .oil-product:hover .oil-product-image img { transform:none; } }
.oil-catalog-cta { display:flex; justify-content:center; margin:30px 0 0; }
#products .oil-price-inquiry { display:flex; justify-content:center; width:min(100%,440px); min-height:86px; padding:16px 24px; background:var(--oil-accent); color:#fff; text-align:center; }
#products .oil-price-inquiry:hover { background:var(--deep); }
#products .oil-price-inquiry .oil-inquiry-copy { display:block; font-size:18px; line-height:1.5; }
.oil-inquiry-copy small { display:block; font:600 15px/1.5 "Noto Sans KR",sans-serif; letter-spacing:-.025em; }
.oil-inquiry-copy strong { display:block; margin-top:4px; font-size:21px; }
@media(max-width:600px) { .oil-catalog-cta { margin-top:24px; } #products .oil-price-inquiry { width:100%; min-height:82px; } }