BODY { MARGIN: 0pt; }
TD,P,INPUT,TEXTAREA,LI,BODY{FONT-SIZE:13px; FONT-FAMILY:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.5; color:#222;}

.debug { display:none; }

.StoreTable { border-collapse: separate; border-spacing: 0; }
.StoreTable .store { background-color: #fafafa; color: #222; transition: background-color 0.15s; }
.StoreTable .store:hover { background-color: #f0f7ff; }
.StoreTable .overpriced_store { background-color: #fafafa; color: #999; }
.StoreTable .spacer { background-color: #fff; }

.logoLink { color:#aaaaaa; }
.logoLink A:link {color:#aaaaaa; text-decoration: none;}
.logoLink A:visited {color:#aaaaaa; text-decoration: none;}
.logoLink A:active {color:#aaaaaa; text-decoration: underline;}
.logoLink A:hover {color:#aaaaaa; text-decoration: underline;}

.logoLinkFBP { color:#666666; }
.logoLinkFBP A:link {color:#666666; text-decoration: none;}
.logoLinkFBP A:visited {color:#666666; text-decoration: none;}
.logoLinkFBP A:active {color:#666666; text-decoration: underline;}
.logoLinkFBP A:hover {color:#666666; text-decoration: underline;}

.logoBlackLink { color:#000000; }
.logoBlackLink A:link {color:#000000; text-decoration: none;}
.logoBlackLink A:visited {color:#000000; text-decoration: none;}
.logoBlackLink A:active {color:#000000; text-decoration: underline;}
.logoBlackLink A:hover {color:#000000; text-decoration: underline;}

.v2Link { color:#222; }
.v2Link A:link {color:#222; text-decoration: none;}
.v2Link A:visited {color:#222; text-decoration: none;}
.v2Link A:active {color:#1a73e8; text-decoration: underline;}
.v2Link A:hover {color:#1a73e8; text-decoration: underline;}

.v2BlueLink { color:#1a73e8; }
.v2BlueLink A:link {color:#1a73e8; text-decoration: none;}
.v2BlueLink A:visited {color:#1a73e8; text-decoration: none;}
.v2BlueLink A:active {color:#1a73e8; text-decoration: underline;}
.v2BlueLink A:hover {color:#1558b0; text-decoration: underline;}

.v2LinkUL { color:#000000; }
.v2LinkUL A:link {color:#000000; text-decoration: underline;}
.v2LinkUL A:visited {color:#000000; text-decoration: underline;}
.v2LinkUL A:active {color:green; text-decoration: underline;}
.v2LinkUL A:hover {color:green; text-decoration: underline;}

.v2GrayLink { color:#555; }
.v2GrayLink A:link {color:#555; text-decoration: none;}
.v2GrayLink A:visited {color:#555; text-decoration: none;}
.v2GrayLink A:active {color:#1a73e8; text-decoration: underline;}
.v2GrayLink A:hover {color:#1a73e8; text-decoration: underline;}

.v2GrayLinkUL { color:#555; }
.v2GrayLinkUL A:link {color:#555; text-decoration: underline;}
.v2GrayLinkUL A:visited {color:#555; text-decoration: underline;}
.v2GrayLinkUL A:active {color:#1a73e8; text-decoration: underline;}
.v2GrayLinkUL A:hover {color:#1a73e8; text-decoration: underline;}

.v2LightGrayLink { color:#666; }
.v2LightGrayLink A:link {color:#666; text-decoration: none;}
.v2LightGrayLink A:visited {color:#666; text-decoration: none;}
.v2LightGrayLink A:active {color:#1a73e8; text-decoration: underline;}
.v2LightGrayLink A:hover {color:#1a73e8; text-decoration: underline;}

.v2LightGrayLinkUL { color:#666; }
.v2LightGrayLinkUL A:link {color:#666; text-decoration: underline;}
.v2LightGrayLinkUL A:visited {color:#666; text-decoration: underline;}
.v2LightGrayLinkUL A:active {color:#1a73e8; text-decoration: underline;}
.v2LightGrayLinkUL A:hover {color:#1a73e8; text-decoration: underline;}

.v2WhiteLink { color:#ffffff; }
.v2WhiteLink A:link {color:#ffffff; text-decoration: none;}
.v2WhiteLink A:visited {color:#ffffff; text-decoration: none;}
.v2WhiteLink A:active {color:#ffffff; text-decoration: underline;}
.v2WhiteLink A:hover {color:#ffffff; text-decoration: underline;}

.v2WhiteLinkUL { color:#ffffff; }
.v2WhiteLinkUL A:link {color:#ffffff; text-decoration: underline;}
.v2WhiteLinkUL A:visited {color:#ffffff; text-decoration: underline;}
.v2WhiteLinkUL A:active {color:green; text-decoration: underline;}
.v2WhiteLinkUL A:hover {color:green; text-decoration: underline;}

a.multi:link {color:#222; text-decoration: none;}
a.multi:visited {color:#222; text-decoration: none;}
a.multi:active {color:#1a73e8; text-decoration: underline;}
a.multi:hover { color:#1a73e8; text-decoration: underline;}

a.multi:link .v2Link {color:#000000; text-decoration: none;}
a.multi:visited .v2Link {color:#000000; text-decoration: none;}
a.multi:active .v2Link {color:#1a73e8; text-decoration: underline;}
a.multi:hover .v2Link { color:#1a73e8; text-decoration: underline;}

a.multi:link .v2GrayLink {color:#555555; text-decoration: none;}
a.multi:visited .v2GrayLink {color:#555555; text-decoration: none;}
a.multi:active .v2GrayLink {color:#1a73e8; text-decoration: underline;}
a.multi:hover .v2GrayLink { color:#1a73e8; text-decoration: underline;}

.nav_tab A:link { color:#000000; text-decoration: none; }
.nav_tab A:visited { color:#000000; text-decoration: none; }
.nav_tab A:active { color:#000000; text-decoration: underline; }
.nav_tab A:hover { color:#000000; text-decoration: underline; }

.blackLinkStd A:link { color:#7777CC; text-decoration: underline; }
.blackLinkStd A:visited { color:#7777CC; text-decoration: underline; }
.blackLinkStd A:active { color:red; text-decoration: underline; }
.blackLinkStd A:hover { color:#7777CC; text-decoration: underline; }

.whiteLinkStd { color:#555555; }
.whiteLinkStd A:link { color:#555555; text-decoration: none; }
.whiteLinkStd A:visited { color:#555555; text-decoration: none; }
.whiteLinkStd A:active { color:#555555; text-decoration: underline; }
.whiteLinkStd A:hover { color:#555555; text-decoration: underline; }

.regularText { color: #222; font-size:15px; }
.progressBar { border-width:1px; border-style:solid; border-color:#ddd; border-radius:3px; overflow:hidden; }

.off { color: #aaa; }

.transparent { opacity: 0.5; }

/* ========================================
   Global form element styling
   ======================================== */

select {
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  color: #333;
}

input[type="text"] {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

input[type="text"]:focus {
  border-color: #1a73e8;
}

input[type="submit"], input[type="button"] {
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f8f8f8;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s;
}

input[type="submit"]:hover, input[type="button"]:hover {
  background: #eee;
}

/* Header search: keep input + button on one line. Table auto-layout can size the form
   column to exactly max-content, which leaves no slack for the button — flex avoids that. */
.site-header form { display: flex; justify-content: flex-end; align-items: stretch; }
.site-header input[type="submit"], .site-header input[type="button"] { flex: 0 0 auto; white-space: nowrap; box-sizing: border-box; }

input[type="submit"].settings-btn {
  background: #333;
  color: #fff;
  border: none;
}

input[type="submit"].settings-btn:hover {
  background: #555;
}

/* ========================================
   Price comparison page refinements
   ======================================== */

.pc-sidebar {
  font-size: 12px;
}

.pc-sidebar b {
  font-size: 13px;
  color: #333;
}

.pc-sidebar-controls {
  line-height: 1.6;
}

h1 { font-weight: 700; letter-spacing: -0.3px; font-size: 24px !important; }

/* ========================================
   Editions Carousel
   ======================================== */

.editions-carousel {
  padding: 12px 0 4px 0;
  border-top: 1px solid #eee;
  margin: 8px auto 0 auto;
}

.editions-carousel-header {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.editions-carousel-track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.editions-carousel-card {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  text-align: center;
  text-decoration: none;
  color: #333;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: opacity 0.3s, border-color 0.3s, background 0.3s;
}

.editions-carousel-card:hover {
  background: #f5f8ff;
  border-color: #99b;
}

.editions-carousel-card img {
  display: block;
  margin: 0 auto 8px;
  max-width: 100px;
  max-height: 140px;
  border-radius: 4px;
}

.editions-carousel-card img.editions-no-image {
  border: 1px solid #ddd;
  background: #f5f5f5;
}

.editions-carousel-info {
  display: block;
  font-size: 11px;
  color: #555;
  line-height: 1.3;
}

.editions-carousel-card:hover .editions-carousel-info {
  color: #1a73e8;
}

.editions-see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border: 1px dashed #ccc;
  min-height: 100px;
}

.limited-availability {
  display: block;
  font-size: 11px;
  color: #8a5a00;
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.2;
}

/* Layout shell for the price-tier glyphs when rendered inside a carousel
   tile (editions / related printings). Same block placement as
   .limited-availability — the glyph colors/weight come from the inner
   ResultsView.PriceTierHtml span, so no typography here. */
.editions-carousel-badge {
  display: block;
  text-align: center;
  margin-top: 4px;
}

.editions-see-more:hover {
  background: #f0f7ff;
  border-color: #1a73e8;
}
h2 { font-weight: 400; }
h3 { font-weight: 400; }

/* ========================================
   Product Image Lightbox (dialog element)
   ======================================== */

dialog.imgDlg {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
}

dialog.imgDlg::backdrop {
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

dialog.imgDlg img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* ========================================
   Mobile Responsive (max-width: 767px)
   Minimal approach: only prevent horizontal scroll.
   All other fixes are done via inline styles in HTML.
   ======================================== */

@media (max-width: 767px) {
  /* Search results */
  .search-sidebar { display: none !important; }
  .search-results { margin-left: 0 !important; border-left: none !important; }

  /* Header: stack rows on mobile; input grows to fill the row next to the button */
  .site-header > tbody > tr, .site-header > tr { display: flex; flex-wrap: wrap; }
  .site-header > tbody > tr > td, .site-header > tr > td { display: block; width: 100% !important; }
  .site-header form { width: 100%; justify-content: flex-start; }
  .site-header input[type="text"] { box-sizing: border-box; font-size: 16px !important; flex: 1 1 auto; min-width: 0; max-width: none !important; }
  .site-header input[type="submit"], .site-header input[type="button"] { font-size: 16px !important; box-sizing: border-box; }

  /* Price comparison: stack sidebar above results, hide controls */
  .pc-detail { display: none !important; }
  .pc-sidebar-controls { display: none !important; }
  .pc-layout > tbody > tr, .pc-layout > tr { display: flex; flex-wrap: wrap; }
  .pc-layout > tbody > tr > td, .pc-layout > tr > td { display: block; width: 100% !important; }
  .pc-sidebar { border-right: none !important; padding-right: 0 !important; text-align: center; }
  .pc-product-image { margin-bottom: 8px; }
  .pc-no-image { display: none !important; }
  .pc-layout { width: 100% !important; max-width: 100% !important; }
  .StoreTable { width: 100% !important; max-width: 100% !important; }

  /* Homepage: prevent search input and title from overflowing.
     BKHomeView.cs emits <table align="center">, not a <center>-wrapped table,
     so selectors must match both shapes. Logo is <font size="+3">. */
  center > table,
  table[align="center"] { max-width: 100% !important; }
  center > table input[type="text"],
  table[align="center"] input[type="text"] { max-width: 80vw !important; box-sizing: border-box; font-size: 16px !important; }
  center > table font[size="+3"],
  center > table font[size="+4"],
  table[align="center"] font[size="+3"],
  table[align="center"] font[size="+4"] { font-size: 24px !important; }
  center > table font[size="+1"],
  table[align="center"] font[size="+1"] { font-size: 13px !important; }
}