/* Site accent tokens — single source for the hand-written (non-header/footer) CSS.
   Future recolor = edit these two lines. (header/footer use --hf-accent in header-footer.css;
   the generated dynamic_stylesheet_0.css uses the theme "Основной цвет" setting.) */
:root {
  --accent:        #cc0000;  /* resting: fills, buttons, borders, links/hovers on light bg */
  --accent-bright: #ff0000;  /* hover/pressed fills + text/icons on dark bg */
}

/*Шрифт 30 в заголовках*/
.us-html-box h1 {
    font-size: 30px !important;
}
/* consolidated: was two conflicting .us-html-box h2 rules (30px!important won over a later 24px);
   merged into one keeping the effective values (font-size 30px + weight/line-height/color/margin) */
.us-html-box h2 {
    font-size: 30px !important;
    font-weight: 700;
    line-height: 33px;
    color: #30363D;
    margin-bottom: 10px;
}
/*Шрифт на главной*/
.us-html-box p {
  color: #000000;
  font-size: 15px;
}

/*Капс в меню*/
.oct-mm-link > a,
.oct-mm-simple-link > a {
    text-transform: uppercase;
}
/*Капс в наших работах*/
.mt-2 {
    text-transform: uppercase;
}
/* Bold ONLY the "Реалізовані проекти / Наши работы" card headings, which live inside the
   home HTML-module box. Scoped so it does NOT bold the global .mt-2 margin utility elsewhere
   (e.g. the "До кошика" buttons on category pages). */
.us-html-box .mt-2 {
    font-weight: bold;
}
/*Кнопка Звонок с экспертом*/
.call-wrapper {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
/*Почему выбирают нас*/
/* Общий фон блока */
/* Full-bleed dark band. Was `width:100vw; position:relative; left:50%; right:50%; margin:-50vw`,
   which desynced with the scrollbar and flickered a full-width dark strip near the top on menu-hover
   repaint (distinct from the R33 hero-overlay strip). Replaced with a normal-flow negative-margin
   bleed (no positioning, no width:100vw): width stays auto and the symmetric calc() margins expand it
   to the viewport edges. html{overflow-x:hidden} (main.css) already clips the sub-pixel/scrollbar
   overshoot, so no new overflow guard is needed and the sticky header is unaffected. */
.why-choose-us {
  background-color: #2D3136;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Карточки преимуществ */
.choose-card {
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  background: transparent;
}

/* Иконки */
.choose-icon {
  width: 80px;
  height: auto;
}

/* Заголовки */
.choose-card h5 {
  color: #FFFFFF;
  font-size: 18px;
}

/* Тексты */
.choose-card p {
  color: #FFFFFF;
  font-size: 14px;
}
/*Главная кнопка*/
  .cta-wrapper {
    text-align: center;
  }

  .cta-button {
    background-color: var(--accent);
    color: #FFFFFF;
    border: 2px solid var(--accent);
    padding: 16px 48px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .cta-button:hover {
    background-color: var(--accent-bright);
    color: #FFFFFF;
    border-color: var(--accent-bright);
  }

/*Общие правки*/
.col-md-4 a {
    color: #333333;
    font-size: 16px;
    text-decoration: none;
}
.col-md-4 a:hover {
    color: var(--accent);
    text-decoration: underline;
}
.us-categories-wall-row {
  background: #E6E6E6;
  padding-top: 30px;
  margin-top: 10px;
  margin-bottom: 10px;

  position: relative;
}

.us-categories-wall-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  background: #E6E6E6;
  transform: translateX(-50%);
  z-index: -1;
}
.us-categories-wall-title {
    font-size: 16px;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .subcat-item-img {
        max-width: 100px;
        max-height: 100px;
    }
}
.product-grid .us-module-title {
height: 120px;
}
.view1_link {
background: #CBCFD4;
color: #000;
font-size: 13px;
font-weight: 400;
text-decoration: none!important;
}
/*TinyMCE*/
@media (min-width: 479px) {
.align-left {
float: left;
margin: 0.3em 1.8em 1em 0;
text-align: center;
}
.align-right {
float: right;
margin: 0.3em 0 1em 1.8em;
text-align: center;
}
  }
@media (max-width: 478px) {
.align-left {
text-align: center!important;
}
.align-right {
text-align: center!important;
}
.img-fluid {
width: 100%;
}
  }
@media (min-width: 479px) {
figcaption {
width: 300px;
word-wrap: break-word;
}
  }
figcaption {
text-align: justify!important;
font-size: 9pt;
line-height: 12pt;
margin-top: 10px;
}
.rb-gallery .text-gallery {
text-align: center!important;
}
.us-product-option .radio label.radio-img img {
width: 60px;
height: 60px;
}

/* Header dropdown panels are visibility:hidden (not display:none) and overhang below the
   sticky menu-row; on scroll the bar repaint ghost-paints their top edge for one frame,
   producing the flicker strip. Promote each panel to its own compositing layer so the
   bar's repaint no longer touches them. No display/visibility/transition change → open/close
   behavior unchanged. Do NOT use `isolation` here (breaks the sticky menu-row). */
#oct-menu-dropdown-menu,
.oct-mm-dropdown,
.oct-menu-child-ul,
.nav-dropdown-menu,
.header-dropdown-menu,
.address-dropdown-menu,
.shedule-dropdown-menu,
nav#top .us-dropdown,
.us-dropdown-inner,
.us-header-location,
#us-account-dropdown .dropdown-menu,
#us_livesearch {
  will-change: transform;
  backface-visibility: hidden;
}

/* ============================================================
   HOME HERO SLIDES — extracted from the HTML modules:
   module 50 (top, .hero-slide) and module 54 (bottom, .hero-slide-bottom).
   The inline <style> blocks were removed from both module descriptions
   (uk + ru); the section markup stays in the modules.

   FLICKER-STRIP FIX: each slide used `width:100vw`, which overhangs the
   viewport by the scrollbar width and JUMPS at its top seam on repaint
   (when a header dropdown opens) — flashing a strip under the menu-row.
   Same bug class as .why-choose-us. Replaced `100vw` with `width:auto`
   + symmetric `calc(50% - 50vw)` margins (scrollbar-safe; the existing
   html{overflow-x:hidden} in main.css clips sub-pixel overshoot).
   KEPT (load-bearing): the negative margin-top/margin-bottom that tuck
   the slides under the header / over the footer, position:relative
   (anchors the ::before overlay), and the overlay itself. Button colours
   left unchanged (owner decides red-vs-white later).
   ============================================================ */

/* Shared layout + scrollbar-safe full-bleed */
.hero-slide,
.hero-slide-bottom {
  position: relative;                /* anchors the ::before overlay */
  width: auto;                       /* was 100vw — caused the flicker strip */
  margin-left: calc(50% - 50vw);     /* full-bleed to the viewport edges */
  margin-right: calc(50% - 50vw);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/* Top slide — tucks UP under the header (margin-top load-bearing) */
.hero-slide {
  margin-top: -50px !important;      /* fills the ~50px zone under the menu-row */
  padding-top: 0 !important;
  min-height: calc(100vh - 180px);
  background-image: url('/image/catalog/sl1.jpg');
  background-position: center top;
  overflow: hidden;
}

/* Bottom slide — tucks DOWN over the footer (margin-bottom load-bearing) */
.hero-slide-bottom {
  margin-bottom: -50px !important;
  padding-bottom: 0 !important;
  min-height: 60vh;
  background-image: url('/image/catalog/sl2.jpg');
  background-position: center;
}

/* Dark overlay for text legibility */
.hero-slide::before,
.hero-slide-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-slide::before        { background: rgba(0, 0, 0, 0.3); }
.hero-slide-bottom::before { background: rgba(0, 0, 0, 0.4); }

/* Content wrapper */
.hero-content,
.hero-content-bottom {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* --- Top slide text ---
   NOTE: .hero-title/.hero-subtitle are h1/h2 inside .us-html-box, so the
   earlier `.us-html-box h1|h2 { font-size:30px !important }` rules (higher
   specificity) actually win — both render at 30px regardless of the clamp
   below, in both languages. This matched the live pre-extraction rendering
   (the inline <style> clamp was likewise overridden). Kept verbatim from the
   modules for fidelity; do NOT add a higher-specificity override to "restore"
   the clamp unless the owner wants larger hero headings. */
.hero-title {
  color: #ffffff !important;
  font-size: clamp(28px, 5vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-subtitle {
  color: #ffffff !important;
  font-size: clamp(24px, 4vw, 56px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 15px !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-brand {
  color: #ffffff !important;
  font-size: clamp(24px, 4vw, 56px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 25px !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-description {
  color: #ffffff !important;
  font-size: clamp(16px, 2.5vw, 28px) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin-bottom: 50px !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Bottom slide text --- */
.hero-title-bottom {
  color: #ffffff !important;
  font-size: clamp(26px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-subtitle-bottom {
  color: #ffffff !important;
  font-size: clamp(22px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-description-bottom {
  color: #ffffff;
  font-size: clamp(16px, 2.5vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 30px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- CTA buttons (colours unchanged — owner decides red-vs-white later) --- */
.sla-button,
.sla-button-bottom {
  display: inline-block;
  background-color: #ffffff;
  color: #333333;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 600;
  padding: 15px 35px;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.sla-button        { border: none; margin-top: 30px; }
.sla-button-bottom { border: 2px solid #ffffff; }

.sla-button:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}
.sla-button-bottom:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

/* --- Responsive (top + bottom merged per breakpoint; negative margins kept) --- */
@media (max-width: 768px) {
  .hero-slide        { min-height: calc(70vh - 600px); padding: 0 15px; margin-top: -20px !important; }
  .hero-slide-bottom { min-height: 50vh;               padding: 0 15px; margin-bottom: -30px !important; }
  .hero-content,
  .hero-content-bottom { padding: 30px 0; }
  .hero-description        { margin-bottom: 35px; }
  .hero-description-bottom { margin-bottom: 25px; }
  .sla-button,
  .sla-button-bottom { padding: 12px 28px; }
}

@media (max-width: 480px) {
  .hero-slide        { min-height: calc(60vh - 600px); padding: 0 15px; margin-top: -15px !important; }
  .hero-slide-bottom { min-height: 45vh;               padding: 0 15px; margin-bottom: -20px !important; }
  .hero-content,
  .hero-content-bottom { padding: 20px 0; }
  .hero-title             { margin-bottom: 8px; }
  .hero-subtitle          { margin-bottom: 10px; }
  .hero-brand             { margin-bottom: 15px; }
  .hero-description       { margin-bottom: 30px; }
  .hero-title-bottom      { margin-bottom: 10px; }
  .hero-subtitle-bottom   { margin-bottom: 12px; }
  .hero-description-bottom { margin-bottom: 20px; }
  .sla-button,
  .sla-button-bottom { padding: 12px 25px; width: 100%; text-align: center; }
}

@media (max-width: 478px) {
  .hero-slide        { min-height: calc(50vh - 600px); margin-top: -55px !important; }
  .hero-slide-bottom { min-height: 40vh;               margin-bottom: -50px !important; }
}

/* "Наша адреса" panel: open on hover (the ORIGINAL behavior, driven by a CSS :hover visibility
   rule that was lost during the CSS consolidation on this branch — restoring it, not a new
   feature). At rest the panel is opacity:0/visibility:hidden; the :hover rule reveals it. The
   click path in main.js (`.us-dropdown-box.active .us-dropdown`) still works too — both hover
   and click open, as before. `height:auto; padding-bottom:0` is the tail fix from 05e4404 (the
   open panel otherwise reserves ~150px more than its content on light pages, plus a 20px bottom
   padding); `padding-bottom` needs `!important` because main.css sets `.address-dropdown-menu
   { padding: 20px 0 !important }` (id-specificity alone can't beat an !important shorthand),
   `height:auto` has no competing rule. This restores hover-open and MASKS the tail; the stuck
   server-rendered `active` on .us-header-location (address-panel doubling) remains the separate
   F2/F3 fix. Address panel only for now — "Графік роботи" (.shedule-dropdown-menu) handled
   separately (its wrapper may differ). */
#top-left .us-dropdown-box .address-dropdown-menu {
  opacity: 0;
  visibility: hidden;
}
#top-left .us-dropdown-box:hover .address-dropdown-menu {
  opacity: 1;
  visibility: visible;
}
#top-left .address-dropdown-menu {
  height: auto;
  padding-bottom: 0 !important;
}

/* ================================================================
   home-choose-carousel  (dependency-free CSS scroll-snap, no slick)
   The 6 "Чому клієнти обирають EkoWall" advantage cards become a
   1-per-slide swipe carousel on <=991px (native touch scroll + snap);
   above 991px the native Bootstrap 3-up grid renders unchanged. Side
   arrows are injected by js/custom-theme.js; the swipe/snap itself is
   pure CSS and works with no JS. The paragraph and the .call-wrapper
   CTA live OUTSIDE .choose-carousel and render below the carousel.
   ================================================================ */

/* Base (all widths): the wrapper(s) are transparent to layout, so the
   6 col-* columns lay out exactly like native .row children (3-up on
   desktop) — byte-for-byte the current grid. Arrows hidden. No flex or
   overflow leaks above 991px; the carousel behaviour is entirely inside
   the media query below. .cc-viewport is added by the arrow JS. */
.choose-carousel,
.cc-viewport {
  display: contents;
}
.cc-arrow {
  display: none;
}

@media (max-width: 991px) {
  /* .cc-viewport (JS-added) is the positioned box the arrows anchor to;
     it hugs the carousel's height so the arrows sit at the card's middle. */
  .cc-viewport {
    display: block;
    position: relative;
    max-width: 100%;
  }

  /* the scroll container: one card per view, horizontal snap, hidden bar.
     max-width:100% keeps it within the row so the PAGE never scrolls —
     the cards scroll INTERNALLY. */
  .choose-carousel {
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;               /* Firefox */
  }
  .choose-carousel::-webkit-scrollbar { display: none; }  /* WebKit */

  /* each card column = one full-viewport slide (keeps its own padding/height) */
  .choose-carousel > [class*="col-"] {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }

  /* --- side arrows: #cc0000 circle, white Font Awesome chevron --- */
  .cc-arrow {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;               /* tap target >= 40px */
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent, #cc0000);   /* == --hf-accent */
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: 0;              /* no stray button text */
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  }
  .cc-prev { left: 8px; }
  .cc-next { right: 8px; }
  .cc-arrow:hover,
  .cc-arrow:focus {
    background: var(--accent-bright, #ff0000);
    outline: none;
  }
  .cc-arrow::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: #fff;              /* white glyph over the accent circle */
    line-height: 1;
    display: inline-block;
  }
  .cc-prev::before { content: "\f053"; } /* fa chevron-left  */
  .cc-next::before { content: "\f054"; } /* fa chevron-right */
}

/* ==========================================================================
   Catalog product-card image box — fixed 240×240 for ALL grid cards
   --------------------------------------------------------------------------
   Bug: card thumbnails rendered at different sizes (240 vs 157) because the
   compact-card height rules in category.twig were keyed only to the calculator
   attribute (.product-layout:has(.ep-calc-attrs)). Calculator cards got
   height:auto (image box sits at its 240px cap); non-calculator cards fell
   through to `.product-grid .us-module-item{height:100% !important}` (main.css),
   stretching the item to the equal-height flex row (~514px). Inside that
   stretched item the image box (.us-module-img) — flex-shrink:1, aspect 1/1 —
   collapsed to 157×157 while the flex-grow caption absorbed the slack.

   Fix: make the image box a fixed, NON-shrinking 240×240 box for every grid
   card, independent of the calculator attribute or row stretch. Images are
   already uniform (source 2000×2000 → cache -450x450 → natural 450×450),
   object-fit:contain preserves aspect with no crop.

   Scope: .product-grid only (category/search/manufacturer/special grids) —
   matches the existing main.css rules; homepage featured modules are NOT
   .product-grid, so they are untouched. Coexists with the calc inline <style>
   in category.twig, which targets .us-module-item height (not the image box).

   Desktop only (>=768px): mobile (<=767px) keeps main.css's height:auto box
   so the fixed 240px width never overflows a narrow phone column.
   height uses !important to beat main.css:8513 `height:auto !important`.
   ========================================================================== */
@media (min-width: 768px) {
  .product-grid .us-module-img {
    flex: 0 0 auto;          /* never shrink to fill the stretched equal-height item */
    width: 240px;
    height: 240px !important; /* beats main.css `.product-grid .us-module-img{height:auto !important}` */
    max-width: 100%;          /* overflow guard: never wider than the column (768–991px 3-col band
                                 where the content column can be narrower than 240px). width:240px
                                 still pins the box to 240 wherever the column is >=240. */
    margin-left: auto;        /* keep the box centred in the card (as before) */
    margin-right: auto;
  }
  .product-grid .us-module-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;     /* preserve aspect inside the fixed box, no crop/stretch */
  }
}

/* ===========================================================================
   DESCRIPTION CONTENT STYLING — product + blog article bodies
   ---------------------------------------------------------------------------
   After the junk-HTML cleanup (commit 99e1133) descriptions render as bare
   semantic HTML (no inline style/class). This styles the two description
   CONTAINERS so all descriptions — present and future — read cleanly and
   on-brand, WITHOUT re-adding classes into content.

   Containers:
     #us-product-description-tab  → product.twig:673 (the "Огляд товару" tab body)
     .us-blog-post-text           → octemplates/blog/oct_blogarticle.twig:28
   Tokens reused from the theme (main.css / :root): Open Sans 14px, base text
   #444/#333, accent var(--accent)=#cc0000, content-link #50A8FF, border #e5e5e5,
   heading dark #30363D/700 (as .us-html-box h2). No new colors/fonts invented.
   Scoped strictly to the two containers — product buy-zone, calculator widgets,
   category pages and everything else are untouched. No !important needed
   (custom-theme.css loads after main.css; id/class specificity wins).
   =========================================================================== */

/* --- headings: give sections real separation (main.css sets margin-bottom:0) --- */
#us-product-description-tab h2,
#us-product-description-tab h3,
#us-product-description-tab h4,
.us-blog-post-text h2,
.us-blog-post-text h3,
.us-blog-post-text h4 {
    color: #30363D;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .2px;
}
#us-product-description-tab h2,
.us-blog-post-text h2 { font-size: 20px; margin: 1.4em 0 .5em; }
#us-product-description-tab h3,
.us-blog-post-text h3 { font-size: 17px; margin: 1.2em 0 .45em; }
#us-product-description-tab h4,
.us-blog-post-text h4 { font-size: 15px; margin: 1.1em 0 .4em; font-weight: 600; }
/* no stray gap above the very first block */
#us-product-description-tab > :first-child,
.us-blog-post-text > :first-child { margin-top: 0; }

/* --- product paragraphs: room to breathe (blog p is already styled in main.css) --- */
#us-product-description-tab p {
    margin-bottom: .9em;
    line-height: 1.7;
}

/* --- lists: proper markers, indent and item spacing --- */
#us-product-description-tab ul,
#us-product-description-tab ol,
.us-blog-post-text ul,
.us-blog-post-text ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}
#us-product-description-tab ul,
.us-blog-post-text ul { list-style: disc; }
#us-product-description-tab ol,
.us-blog-post-text ol { list-style: decimal; }
#us-product-description-tab li,
.us-blog-post-text li {
    margin-bottom: .35em;
    line-height: 1.6;
}

/* --- tables: readable spec table (theme ships no table style) --- */
#us-product-description-tab table,
.us-blog-post-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 14px;
    line-height: 1.5;
}
#us-product-description-tab th,
#us-product-description-tab td,
.us-blog-post-text th,
.us-blog-post-text td {
    border: 1px solid #e5e5e5;
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}
#us-product-description-tab th,
.us-blog-post-text th {
    background: #f2f3f5;
    color: #30363D;
    font-weight: 700;
}
#us-product-description-tab tbody tr:nth-child(even) td,
.us-blog-post-text tbody tr:nth-child(even) td {
    background: #fafbfc;
}

/* --- links: match the theme's content-link colour (main.css uses #50A8FF) --- */
.us-blog-post-text a {
    color: #50A8FF;
    text-decoration: underline;
}
.us-blog-post-text a:hover { text-decoration: none; }

/* --- inline emphasis, quotes, media --- */
#us-product-description-tab strong,
#us-product-description-tab b,
.us-blog-post-text strong,
.us-blog-post-text b { font-weight: 700; }

#us-product-description-tab blockquote,
.us-blog-post-text blockquote {
    margin: 1.2em 0;
    padding: .2em 0 .2em 1em;
    border-left: 3px solid var(--accent, #cc0000);
    color: #555;
}

#us-product-description-tab img,
.us-blog-post-text img {
    max-width: 100%;
    height: auto;
}