/* ==========================================================================
   RBB Reading & Display Preferences  --  storefront stylesheet  (simplified)
   OpenCart 3.0.x default theme (Bootstrap 3)

   Three attributes on <html> turn these rules on and off:
     data-rbb-size              text size active   (uses --rbb-rp-scale)
     data-rbb-theme="dark|cream"
     data-rbb-width="narrow|full"
   With nothing on <html>, the theme renders exactly as before.
   ========================================================================== */

/* ---------- 1. TEXT SIZE ------------------------------------------------- */
html[data-rbb-size] { --rbb-rp-scale: 1; }

html[data-rbb-size] body { font-size: calc(12px * var(--rbb-rp-scale)) !important; }

html[data-rbb-size] :where(p, li, dd, dt, td, th, label, legend, a, span, div, strong, em, b,
  button, input, select, textarea, option, blockquote, caption, address, cite,
  .btn, .form-control, .input-group-addon, .breadcrumb, .list-group-item,
  .dropdown-menu, .nav, .pagination, .alert, .well, .caption, .price, .table,
  .panel-title, .tooltip, .popover, .modal-body):not(.fa):not([class^="fa-"]):not([class*=" fa-"]) {
  font-size: inherit !important;
}

html[data-rbb-size] h1, html[data-rbb-size] .h1 { font-size: calc(33px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] h2, html[data-rbb-size] .h2 { font-size: calc(27px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] h3, html[data-rbb-size] .h3 { font-size: calc(21px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] h4, html[data-rbb-size] .h4 { font-size: calc(15px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] h5, html[data-rbb-size] .h5 { font-size: calc(12px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] h6, html[data-rbb-size] .h6 { font-size: calc(10.5px * var(--rbb-rp-scale)) !important; }

html[data-rbb-size] #menu .nav > li > a          { font-size: calc(15px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] #menu .dropdown-menu a       { font-size: calc(12px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] .product-thumb .price-new,
html[data-rbb-size] .product-info .list-unstyled h2 { font-size: calc(18px * var(--rbb-rp-scale)) !important; }
html[data-rbb-size] .price-old,
html[data-rbb-size] .price-tax                   { font-size: 0.85em !important; }
html[data-rbb-size] small, html[data-rbb-size] .small { font-size: 85% !important; }
html[data-rbb-size] .badge, html[data-rbb-size] .label { font-size: 75% !important; }
html[data-rbb-size] .fa                          { font-size: inherit; }
html[data-rbb-size] .form-control                { height: auto !important; min-height: 34px; }
html[data-rbb-size] #cart .btn,
html[data-rbb-size] #search .btn                 { height: auto !important; }

/* ---------- 2. COLOURS -------------------------------------------------- */

/* Dark  --  inverts the whole page, then un-inverts pictures and video so
   product photos keep their real colours. */
html[data-rbb-theme="dark"] {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
html[data-rbb-theme="dark"] :is(img, video, iframe, canvas, picture, svg,
  .swiper-slide, [style*="background-image"]) {
  filter: invert(1) hue-rotate(180deg);
}
html[data-rbb-theme="dark"] :is(img, video, iframe, canvas, picture, svg) :is(img, video, canvas, svg) {
  filter: none;
}

/* Cream  --  soft warm paper, lower glare than pure white. */
html[data-rbb-theme="cream"] { --rbb-rp-bg: #f7f0df; --rbb-rp-fg: #332a1c; --rbb-rp-link: #1a4f9c; }
html[data-rbb-theme="cream"] :is(body, #container, .panel, .panel-body, .panel-footer, .well,
  .product-thumb, .product-thumb .caption, .form-control, .dropdown-menu, .list-group-item,
  .table, .table > tbody > tr > td, .modal-content, .breadcrumb, .pagination > li > a,
  .input-group-addon, .nav-tabs > li > a, .tab-content, footer, #top, .thumbnail) {
  background-color: var(--rbb-rp-bg) !important;
  color: var(--rbb-rp-fg) !important;
  border-color: #d9cdb0 !important;
}
html[data-rbb-theme="cream"] :is(p, li, td, th, label, h1, h2, h3, h4, h5, h6, span, dd, dt, footer a, #top a) { color: var(--rbb-rp-fg) !important; }
html[data-rbb-theme="cream"] #content a:not(.btn) { color: var(--rbb-rp-link) !important; }
html[data-rbb-theme="cream"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: #efe6cf !important; }

/* ---------- 3. PAGE WIDTH ----------------------------------------------- */
/* Wide: fills the window with small side margins. */
html[data-rbb-width="full"] .container {
  width: auto !important;
  max-width: none !important;
  padding-left: 24px;
  padding-right: 24px;
}
/* Narrow: tighter reading column; header (and logo) keep theme width. */
html[data-rbb-width="narrow"] .container:not(header .container):not(#top .container) {
  width: auto !important;
  max-width: 880px !important;
}
@media (max-width: 767px) {
  html[data-rbb-width="full"] .container { padding-left: 15px; padding-right: 15px; }
}

/* ---------- 4. LOGO GUARD ----------------------------------------------- */
/* Whatever the visitor picks, the store logo keeps its exact size, colours
   and position. */
html[data-rbb-size] #logo img, html[data-rbb-width] #logo img, html[data-rbb-theme] #logo img {
  max-width: 100% !important; width: auto !important; height: auto !important;
  max-height: none !important; transform: none !important; opacity: 1 !important;
}