/* =====================================================
   Frontier Toyota — Minimal Replacement Styles
   Replaces failed static.dealer.com CDN stylesheets
   ===================================================== */

/* ----- Reset & Base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background: #f5f5f5;
}

a { color: #1a6aad; text-decoration: none; }
a:hover { text-decoration: underline; color: #0d4a80; }

img { max-width: 100%; height: auto; display: block; }

ul { list-style: none; }

h1, h2, h3, h4 { line-height: 1.2; }

/* ----- YUI3 Grid ----- */
.yui3-g { display: flex; flex-wrap: wrap; width: 100%; }
.yui3-u-1     { width: 100%; }
.yui3-u-1-2   { width: 50%; }
.yui3-u-1-3   { width: 33.333%; }
.yui3-u-2-3   { width: 66.667%; }
.yui3-u-1-4   { width: 25%; }
.yui3-u-3-4   { width: 75%; }
.yui3-u-1-5   { width: 20%; }
.yui3-u-4-5   { width: 80%; }

/* ----- Main Wrapper ----- */
.ddc-layout { max-width: 1200px; margin: 0 auto; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.15); }

/* ----- Header ----- */
header.page-header {
  background: #1a1a1a;
  padding: 0 20px;
}

/* Inner container: logo + vcard side by side, single row */
.header-default .bd {
  display: flex;
  align-items: center;
  padding: 10px 0;
  gap: 14px;
}

/* Logo — left */
.home-logolink {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.home-logolink img { height: 55px; width: auto; display: block; }
.franchises { display: flex; }
.franchises li { display: flex; }

/* vcard — takes all remaining space, row layout */
.vcard {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}

/* Brand name — immediately after logo */
.vcard .fn {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  margin: 0;
}
.vcard .org { color: #fff; }

/* Hide clutter: address, phone, toyota link, headerlinks */
.vcard .adr,
.vcard .tels,
.vcard .address,
.vcard a.toyota,
.vcard .headerlinks { display: none !important; }

/* === "Service Your Vehicle" block — pushed to far right === */
.vcard .bookonline {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "Service Your Vehicle" label text */
.vcard .bookonline > span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ccc;
  font-size: 13px;
  font-weight: normal;
  white-space: nowrap;
}

/* "Book Online" link — styled as button */
.vcard .bookonline a,
.vcard .bookonline span > a {
  display: inline-block;
  padding: 9px 20px;
  background: #eb0a1e;
  color: #fff !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s;
  border: 2px solid transparent;
}
.vcard .bookonline a:hover,
.vcard .bookonline span > a:hover {
  background: #c00017;
  text-decoration: none !important;
}

/* Hide the inventory search form from the header — it's redundant */
header.page-header .inventory-search-form { display: none; }
header.page-header .links-locale { display: none; }

/* ----- Navigation ----- */
nav.nav {
  background: #eb0a1e;
}

.non-mega-menu { width: 100%; }

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}

.navbar-nav > li > a {
  display: block;
  padding: 13px 16px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background .2s;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.currentPage > a {
  background: rgba(0,0,0,.25);
  text-decoration: none;
}

/* Dropdown */
.dropdown { position: relative; }
.dropdown > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #222;
  min-width: 220px;
  z-index: 999;
  border-top: 3px solid #eb0a1e;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
}
.dropdown:hover > ul { display: block; }
.dropdown > ul > li > a {
  display: block;
  padding: 9px 16px;
  color: #ddd;
  font-size: 13px;
  border-bottom: 1px solid #333;
}
.dropdown > ul > li > a:hover { background: #eb0a1e; color: #fff; text-decoration: none; }

.caret { display: none; }

/* ----- Page Body ----- */
.ddc-page { background: #fff; }
.page-bd { padding: 0; }

/* ----- Upper / Slideshow Region ----- */
.region.upper { background: #1a1a1a; }

.slideShowWrap { position: relative; overflow: hidden; background: #111; }
.slides { position: relative; }

.slide { display: none; }
.slide:first-child { display: block; }

.slide img { width: 100%; height: auto; }

.slideControls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.slideControls a {
  background: rgba(0,0,0,.5);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}
.slideControls a:hover { background: #eb0a1e; text-decoration: none; }

/* Inventory search form (main) */
.inventory-search-facetbrowse {
  background: #f0f0f0;
  padding: 16px 20px;
  border-bottom: 1px solid #ddd;
}
.inventory-search-facetbrowse .widget-heading { display: none; }
.inventory-search-facetbrowse form fieldset { border: none; }
.inventory-search-facetbrowse section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inventory-search-facetbrowse label { display: flex; flex-direction: column; font-size: 12px; color: #555; }
.inventory-search-facetbrowse select {
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}
.inventory-search-facetbrowse label.listingConfigId { display: none; }

/* ----- Buttons ----- */
.ui-button, button[type="submit"] {
  background: #eb0a1e;
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background .2s;
  display: inline-block;
  margin-top: auto;
}
.ui-button:hover, button[type="submit"]:hover { background: #c00017; }
.ui-button-text { pointer-events: none; }

/* ----- Featured Vehicles / hproduct Cards ----- */
.region.divider {
  padding: 20px;
}

.featuretabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.featuretabs span {
  padding: 8px 18px;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #555;
}
.featuretabs span.selected {
  background: #eb0a1e;
  color: #fff;
}

.jcarousel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.jcarousel > li {
  flex: 1 1 200px;
  max-width: 230px;
}

.hproduct {
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hproduct:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); }

.hproduct .media { overflow: hidden; }
.hproduct .media img { width: 100%; height: 160px; object-fit: cover; transition: transform .3s; }
.hproduct .media img:hover { transform: scale(1.04); }

.hproduct > div { padding: 10px; flex: 1; display: flex; flex-direction: column; }

.hproduct .fn { font-size: 13px; font-weight: bold; margin-bottom: 6px; }
.hproduct .fn a { color: #222; }
.hproduct .fn a:hover { color: #eb0a1e; text-decoration: none; }

.hproduct .pricing { margin-bottom: 8px; }
.hproduct .price { font-size: 14px; }
.hproduct .value { font-weight: bold; color: #eb0a1e; }
.hproduct .sales-taxes { font-size: 11px; color: #888; display: block; }
.hproduct .label { color: #555; font-size: 12px; }
.hproduct .separator { display: none; }

.hproduct .description {
  font-size: 11px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
}
.hproduct .description strong { color: #444; }
.hproduct .description .separator { display: inline; }

.view-link {
  display: inline-block;
  margin-top: auto;
  padding: 7px 14px;
  background: #1a6aad;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  transition: background .2s;
}
.view-link:hover { background: #0d4a80; text-decoration: none; color: #fff; }

/* ----- Widget Headings ----- */
.widget-heading {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  padding: 12px 0;
  border-bottom: 2px solid #eb0a1e;
  margin-bottom: 12px;
}

/* ----- Links List (footer columns) ----- */
.region.lower, .footer-wrap, .footer-nav-brand { background: #1a1a1a; color: #ccc; padding: 20px; }

.links-list .widget-heading { color: #fff; border-color: #eb0a1e; font-size: 15px; }
.links-list ul { padding: 0; }
.links-list li { padding: 4px 0; border-bottom: 1px solid #333; }
.links-list a { color: #bbb; font-size: 13px; }
.links-list a:hover { color: #fff; text-decoration: none; }

/* ----- Contact Form (footer) ----- */
.contact-form { padding: 20px; background: #222; border-radius: 6px; }
.contact-form .widget-heading { color: #fff; border-color: #eb0a1e; }
.contact-form label { display: flex; flex-direction: column; font-size: 12px; color: #aaa; margin-bottom: 10px; }
.contact-form label span { margin-bottom: 4px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
  padding: 7px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #333;
  color: #fff;
  font-size: 13px;
  width: 100%;
}
.contact-form textarea { min-height: 80px; resize: vertical; }
.contact-form em { color: #eb0a1e; }
.contact-form .hidden { display: none; }

/* ----- Footer bottom nav ----- */
.footer-nav-brand {
  border-top: 1px solid #333;
  background: #111;
}
.footer-nav-brand .nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.footer-nav-brand .nav-list a {
  color: #999;
  font-size: 12px;
  padding: 6px 10px;
}
.footer-nav-brand .nav-list a:hover { color: #fff; }
.footer-nav-brand .credit { color: #888; font-size: 12px; }

/* Back to top */
.links-scroll a {
  display: inline-block;
  padding: 8px 16px;
  background: #eb0a1e;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0;
}
.links-scroll a:hover { background: #c00017; text-decoration: none; }

/* ----- Misc / Utilities ----- */
.hide, .hidden { display: none !important; }
.bd { padding: 0; }
.hd { }

/* Forms — generic */
label { font-size: 13px; color: #555; display: block; margin-bottom: 6px; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea {
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  background: #fff;
  color: #333;
}
input[type="text"]:focus,
input[type="email"]:focus,
select:focus { outline: 2px solid #1a6aad; border-color: #1a6aad; }

/* =====================================================
   Content Pages — section.region.main + aside
   ===================================================== */

/* Outer row: main + aside side by side */
.yui3-g.aside-right,
.yui3-g.aside-left {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  background: #f0f2f4;
}

/* Main content section — grows to fill remaining space */
section.region.main {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  padding: 28px 32px;
  min-height: 400px;
  border-right: 1px solid #e0e3e8;
}

/* Sidebar (aside) — fixed 260px, never shrinks */
aside.region.aside {
  flex: 0 0 260px;
  background: #f7f8fa;
  padding: 20px 16px;
  border-left: 1px solid #e0e3e8;
}

/* --- Rich text / WYSIWYG content inside .content --- */
.region.main .content {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  max-width: 800px;
}

/* Strip legacy <font> tag influence — let CSS take over */
.region.main .content font { font-family: inherit !important; }

/* Headings inside content */
.region.main .content h1,
.region.main .content h2,
.region.main .content h3,
.region.main .content h4,
.region.main .content h5,
.region.main .contentHeading {
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
  margin: 20px 0 10px;
  line-height: 1.3;
}
.region.main .content h1 { font-size: 24px; }
.region.main .content h2 { font-size: 21px; }

/* Paragraphs */
.region.main .content p,
.region.main .content div > font {
  margin-bottom: 12px;
}

/* Links inside content */
.region.main .content a { color: #1a6aad; }
.region.main .content a:hover { color: #eb0a1e; text-decoration: underline; }

/* Bold inside content */
.region.main .content b,
.region.main .content strong { color: #1a1a1a; }

/* Images inside WYSIWYG */
.region.main .content img,
.region.main .content .wysiwyg-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 14px 0;
  display: block;
}

/* Phone highlight (red color often used inline) */
.region.main .content font[color="#ff0000"],
.region.main .content font[color="#FF0000"] {
  color: #eb0a1e !important;
  font-weight: bold;
}

/* Page-level H1 / widget heading inside main */
.region.main .ddc-content .hd h1,
.region.main .widget-heading {
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a;
  padding-bottom: 8px;
  border-bottom: 2px solid #eb0a1e;
  margin-bottom: 16px;
}

/* --- Aside sidebar --- */

/* Quick links list — large buttons */
aside .links-list .hd h1,
aside .widget-heading {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #555;
  border-bottom: 2px solid #eb0a1e;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

aside .links-list .bd ul { padding: 0; }
aside .links-list .bd li { margin-bottom: 6px; }

/* .xlarge button variant inside aside */
aside .ui-button.xlarge,
.aside .ui-button.xlarge,
aside .links-list a.ui-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  background: #1a6aad;
  color: #fff !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none !important;
  transition: background .2s;
  box-sizing: border-box;
}
aside .ui-button.xlarge:hover,
aside .links-list a.ui-button:hover {
  background: #0d4a80;
  text-decoration: none !important;
}

/* Hours of operation */
.hours-default .hd h1 {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #555;
  border-bottom: 2px solid #eb0a1e;
  padding-bottom: 6px;
  margin: 16px 0 10px;
}
.ddc-hours {
  list-style: none;
  padding: 0;
  font-size: 13px;
}
.ddc-hours li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  color: #444;
}
.ddc-hours li em {
  font-style: normal;
  font-weight: bold;
  color: #222;
  min-width: 90px;
}
.ddc-hours li.today,
.ddc-hours li.current {
  background: #fff8e1;
  border-radius: 3px;
  padding: 5px 6px;
  color: #b8860b;
  font-weight: bold;
}

/* --- aside-none = full-width pages (no sidebar) --- */
.aside-none section.region.main,
.aside-none .region.main {
  border-right: none;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 32px;
}


/* =====================================================
   VLP (Vehicle Listing Page) — Sidebar + Inventory
   ===================================================== */

/* Page body on VLP: sidebar + main side by side */
.vlp .page-bd .aside-none { background: #f0f2f4; }

.vlp .inventory-listing-default > .bd > .yui3-g.row {
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0;
}

/* ----- Sidebar (.yui3-u-1-4.ddc-span3) ----- */
.ddc-span3 {
  background: #fff;
  border-right: 1px solid #dde0e4;
  padding: 16px 12px;
  min-width: 220px;
  box-sizing: border-box;
}

/* Quick search at top of sidebar */
.ddc-span3 > form {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.ddc-span3 > form input[type="search"] {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #f9f9f9;
  color: #333;
}
.ddc-span3 > form .ui-button {
  padding: 7px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Facet search form (dropdowns) */
.ddc-span3 .facetbrowse-ajax-form fieldset { border: none; }
.ddc-span3 .facetbrowse-ajax-form section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ddc-span3 .facetbrowse-ajax-form label.facet {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: bold;
}
.ddc-span3 .facetbrowse-ajax-form label.facet.hide { display: none; }
.ddc-span3 .facetbrowse-ajax-form select {
  margin-top: 3px;
  padding: 7px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #333;
  width: 100%;
  cursor: pointer;
}
.ddc-span3 .facetbrowse-ajax-form select:focus {
  outline: 2px solid #1a6aad;
  border-color: #1a6aad;
}
.ddc-span3 .submit-search {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.ddc-span3 .reset-search {
  display: block;
  text-align: center;
  margin-top: 6px;
  width: 100%;
  padding: 7px;
  background: #eee;
  color: #555;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #ccc;
  transition: background .2s;
}
.ddc-span3 .reset-search:hover { background: #ddd; text-decoration: none; }

/* Facet list sections (Year, Make, Body Style…) */
.facetlist {
  margin-top: 16px;
  border-top: 1px solid #e8eaed;
  padding-top: 12px;
}
.facetlist .hd h1 {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #555;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #eb0a1e;
  display: inline-block;
}
.facetlist .bd ul { padding: 0; }
.facetlist .bd ul li {
  border-bottom: 1px solid #f0f0f0;
}
.facetlist .bd ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  transition: color .15s, background .15s;
  border-radius: 3px;
}
.facetlist .bd ul li a:hover {
  color: #eb0a1e;
  background: #fef5f5;
  text-decoration: none;
}
.facetlist .bd ul li a em {
  font-style: normal;
  font-size: 11px;
  color: #999;
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}
.facetlist .bd ul li a:hover em {
  background: #fde0e0;
  color: #eb0a1e;
}

/* "View More / View Less" toggle */
.constraintsToggle {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #1a6aad;
  font-weight: bold;
}
.constraintsToggle:hover { color: #0d4a80; text-decoration: underline; }

/* ----- Main listing area (.ddc-span9) ----- */
.ddc-span9 {
  padding: 16px 20px;
  background: #f0f2f4;
  min-width: 0;
}

/* Results count + "All listings" link */
.selections {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}
.selections strong { color: #222; }
.selections .no-link { margin-left: 8px; font-size: 12px; }

/* View toggle (Full / List / Grid) */
.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.toggle strong { font-size: 12px; color: #777; margin-right: 4px; }
.toggle a {
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  color: #555;
  text-decoration: none;
  background: #fff;
  transition: all .15s;
}
.toggle a:hover, .toggle a.selected {
  background: #1a6aad;
  color: #fff;
  border-color: #1a6aad;
  text-decoration: none;
}

/* Sort bar */
.sorting {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.sorting strong { font-size: 12px; color: #777; }
.sorting a {
  font-size: 12px;
  color: #1a6aad;
  padding: 4px 8px;
  border-radius: 3px;
  text-decoration: none;
}
.sorting a:hover { background: #e8f0fb; text-decoration: none; }
.sorting a.asc::after { content: ' ↑'; }
.sorting a.desc::after { content: ' ↓'; }

/* Pagination */
.paging {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.paging .xsmall { font-size: 12px; color: #777; }
.paging .ui-button.xsmall {
  padding: 5px 12px;
  font-size: 12px;
  background: #1a6aad;
}
.paging .ui-button.xsmall:hover { background: #0d4a80; }

/* ---- Inventory list items (full view) ---- */
.inventoryList { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.inventoryList .item {
  background: #fff;
  border: 1px solid #dde0e4;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.inventoryList .item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

/* hproduct inside full listing — horizontal layout */
.inventoryList .hproduct > div {
  display: flex;
  gap: 0;
  padding: 0;
  flex-direction: row;
}

/* Photo block */
.inventoryList .hproduct .media {
  flex-shrink: 0;
  width: 260px;
  position: relative;
  overflow: hidden;
  background: #eee;
}
.inventoryList .hproduct .media img {
  width: 100%;
  height: 185px;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.inventoryList .hproduct .media img:hover { transform: scale(1.03); }

/* Video / Photos links */
.inventoryList .hproduct .media .dialog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 4px 8px;
  border-radius: 3px;
  text-decoration: none;
  margin: 4px 4px 0 0;
  position: absolute;
  bottom: 6px;
  transition: background .2s;
}
.inventoryList .hproduct .media .dialog.video { left: 6px; }
.inventoryList .hproduct .media .dialog.photos { left: 90px; }
.inventoryList .hproduct .media .dialog:hover { background: rgba(235,10,30,.85); text-decoration: none; }
.ui-icon { display: inline-block; width: 14px; height: 14px; }

/* Info block (right of photo) */
.inventoryList .hproduct > div > div:not(.media) {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Title */
.inventoryList .hproduct .fn.h3 {
  font-size: 17px;
  font-weight: bold;
  margin: 0;
}
.inventoryList .hproduct .fn.h3 .url {
  color: #1a1a1a;
  text-decoration: none;
}
.inventoryList .hproduct .fn.h3 .url:hover { color: #eb0a1e; }

/* Pricing area */
.pricing-area { margin: 4px 0; }
.pricing-area .pricing { list-style: none; padding: 0; }
.pricing-area .price { font-size: 15px; margin: 0; }
.pricing-area .label { color: #777; font-size: 13px; }
.pricing-area .separator { display: none; }
.pricing-area .value { font-size: 20px; font-weight: bold; color: #eb0a1e; }
.pricing-area .sales-taxes { display: block; font-size: 11px; color: #999; margin-top: 2px; }

/* Specs DL */
.inventoryList .hproduct .description { flex: 1; }
.inventoryList .hproduct .description dl {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-bottom: 4px;
}
.inventoryList .hproduct .description dt {
  font-size: 12px;
  color: #888;
  font-weight: normal;
}
.inventoryList .hproduct .description dd {
  font-size: 12px;
  color: #333;
  font-weight: bold;
}
.inventoryList .hproduct .description dd .separator { display: none; }
.inventoryList .hproduct .ddc-more {
  display: inline-block;
  font-size: 12px;
  color: #1a6aad;
  cursor: pointer;
  margin-top: 4px;
}
.inventoryList .hproduct .badge img { max-height: 36px; }

/* Compare checkbox */
.item-compare {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #f8f8f8;
  border-top: 1px solid #eee;
  font-size: 12px;
}
.item-compare label { display: flex; align-items: center; gap: 6px; color: #555; margin: 0; font-size: 12px; cursor: pointer; }
.item-compare input[type="checkbox"] { width: auto; cursor: pointer; }
.item-compare .compare-submit-link {
  padding: 5px 12px;
  background: #ccc;
  color: #888;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
.item-compare .compare-submit-link:not(.disabled) {
  background: #1a6aad;
  color: #fff;
}

/* ----- Responsive ----- */
@media (max-width: 800px) {
  .yui3-u-1-2,
  .yui3-u-1-3,
  .yui3-u-2-3,
  .yui3-u-1-4,
  .yui3-u-3-4,
  .yui3-u-4-5,
  .yui3-u-1-5 { width: 100%; }

  /* VLP sidebar → full width on mobile */
  .vlp .inventory-listing-default > .bd > .yui3-g.row { flex-wrap: wrap; }
  .ddc-span3 { width: 100% !important; border-right: none; border-bottom: 1px solid #dde0e4; }
  .ddc-span9 { width: 100% !important; padding: 12px; }
  .inventoryList .hproduct > div { flex-direction: column; }
  .inventoryList .hproduct .media { width: 100%; }
  .inventoryList .hproduct .media img { height: 220px; }

  .header-default .bd { flex-wrap: wrap; gap: 10px; }
  .vcard .bookonline { margin-left: 0; margin-top: 6px; }
  .vcard .fn { font-size: 16px; }

  .navbar-nav { flex-direction: column; }
  .dropdown > ul { position: static; display: none; }
  .dropdown:hover > ul { display: block; }

  .jcarousel > li { max-width: 100%; min-width: 200px; }
}