/*
Theme Name: AA Theme
Author: Philip Rudy
Author URI: https://philiparudy.com
 */


:root {
  --cyan: #18F5FA;
  --alt: #009B8F;

  --black_aa: #101010;
  --black_alt: #1a1a1a;
  --black_text: #121212;

  --white: #ffffff;
  --grey_light: #e5e5e5;

  --vertical_rythm: 7px;
  --container: 1728px;
  --container_padding: 20px;

  --header_font: 'Aeonik', sans-serif;
  --body_font: 'TT Commons Pro', sans-serif;

  --h1_font_size: 35px;
  --h1_line_height: 42px;

  --h2_font_size: 42px;
  --h2_line_height: 49px;

  --h3_font_size: 24px;
  --h3_line_height: 28px;

  --h4_font_size: 20px;
  --h4_line_height: 28px;

  --h5_font_size: 18px;
  --h5_line_height: 21px;

  --h6_font_size: 16px;
  --h6_line_height: 21px;

  --p_font_size: 18px;
  --p_line_height: 28px;

  --button_font_size: 18px;
  --button_line_height: 18px;

  --button_sm_font_size: 12px;
  --button_sm_line_height: 22px;

  --psmall_font_size: 16px;
  --psmall_line_height: 21px;

  --ptiny_font_size: 14px;
  --ptiny_line_height: 21px;

  --border_color: #222222;
}

body * {
  box-sizing: border-box;
}

 .otslr-container {
  width: var(--container);
  padding: 0 var(--container_padding);
  margin: auto;
 }
 .otslr-container--pull {
  padding-left: 290px;
 }

/* Aeonik Thin */
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-Thin.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-ThinItalic.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Aeonik Air */
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-Air.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-Air.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-AirItalic.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-AirItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Aeonik Light */
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-Light.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-LightItalic.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Aeonik Regular */
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-Regular.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-RegularItalic.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Aeonik Medium */
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-Medium.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-MediumItalic.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Aeonik Bold */
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-Bold.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-BoldItalic.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Aeonik Black */
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-Black.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('static/fonts/aeonik/Aeonik-BlackItalic.woff2') format('woff2'),
       url('static/fonts/aeonik/Aeonik-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* TT Commons Pro Regular */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('static/fonts/tt-commons/woff2/TT_Commons_Pro_Regular.woff2') format('woff2'),
       url('static/fonts/tt-commons/woff/TT_Commons_Pro_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* TT Commons Pro Italic */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('static/fonts/tt-commons/woff2/TT_Commons_Pro_Italic.woff2') format('woff2'),
       url('static/fonts/tt-commons/woff/TT_Commons_Pro_Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* TT Commons Pro Bold */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('static/fonts/tt-commons/woff2/TT_Commons_Pro_Bold.woff2') format('woff2'),
       url('static/fonts/tt-commons/woff/TT_Commons_Pro_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* TT Commons Pro Bold Italic */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('static/fonts/tt-commons/woff2/TT_Commons_Pro_Bold_Italic.woff2') format('woff2'),
       url('static/fonts/tt-commons/woff/TT_Commons_Pro_Bold_Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* TT Commons Pro Light */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('static/fonts/tt-commons/woff2/TT_Commons_Pro_Light.woff2') format('woff2'),
       url('static/fonts/tt-commons/woff/TT_Commons_Pro_Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* TT Commons Pro Light Italic */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('static/fonts/tt-commons/woff2/TT_Commons_Pro_Light_Italic.woff2') format('woff2'),
       url('static/fonts/tt-commons/woff/TT_Commons_Pro_Light_Italic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* TT Commons Pro Extra Light */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('static/fonts/tt-commons/woff2/TT_Commons_Pro_ExtraLight.woff2') format('woff2'),
       url('static/fonts/tt-commons/woff/TT_Commons_Pro_ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Aeonik', sans-serif;
  margin: 0;
}

h1 {
  font-size: var(--h1_font_size);
  line-height: var(--h1_line_height);
}

h2 {
  font-size: var(--h2_font_size);
  line-height: var(--h2_line_height);
}

h3 {
  font-size: var(--h3_font_size);
  line-height: var(--h3_line_height);
}

h4 {
  font-size: var(--h4_font_size);
  line-height: var(--h4_line_height);
}

h5 {
  font-size: var(--h5_font_size);
  line-height: var(--h5_line_height);
}

h6 {
  font-size: var(--h6_font_size);
  line-height: var(--h6_line_height);
}

a,
p,
li,
ul,
span,
small {
  font-family: 'TT Commons Pro', sans-serif;
  font-size: var(--p_font_size);
  line-height: var(--p_line_height);
}

.otslr-disclaimer {
  background: var(--white);
  font-family: 'Aeonik', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  padding: 14px;
  line-height: 21px !
}

 button.otslr-button--search {
  outline: none;
  border: none;
 }

 a.otslr-button,
 button.otslr-button {
    background-color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 21px;
    color: var(--black_aa);
    border-radius: 7px;
    font-weight: 700;
    text-decoration: none;
    font-size: var(--button_font_size);
    line-height: var(--button_line_size);
    font-family: 'Aeonik', sans-serif;
    outline: none;
 }

  a.otslr-button--small,
 button.otslr-button--small {
    width: 70px;
    font-size: var(--button_sm_font_size);
    line-height: var(--button_sm_line_size);
    font-family: 'Aeonik', sans-serif;
 }


 html,
 body {
    background-color: var(--white);
    padding: 0px;
    padding: 0;
    margin: 0;
 }

.otslr-gradient,
 body {
  min-height: 100vh;
 }

 html,
body {
    background-color: var(--white);
    margin: 0;
    padding: 0;
}

body.admin-bar aside {
    top: 32px; /* Default WP admin bar height */
}

@media screen and (max-width: 782px) {
    body.admin-bar aside {
        top: 46px; /* Taller admin bar on mobile */
    }
}

 

 /* TOP BAR */

 .otslr-top-bar {
    background-color: var(--black_alt);
    height: 49px;
    align-items: center;
 }

 .otslr-top-bar__inner {
    display: flex;
    justify-content: flex-end;
    height: 49px;
 }

 .otslr-registration {
   display: flex;
   justify-content: center;
   gap: 20px;
   align-items: center;
 }

 .otslr-registration .otslr-login {
   display: flex;
   justify-content: center;
   gap: 20px;
   font-size: var(--button_sm_font_size);
  line-height: var(--button_sm_line_size);
  color: var(--white);
  text-decoration: none;
 }

 .otslr-site-header {
    background-color: var(--black_aa);
 }

 .otslr-site-header__inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    align-items: center;
        height: 105px;
 }

  .otslr-site-header__inner nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
    gap: 20px;
  }

  .otslr-site-header__inner nav ul > li > a {
    font-size: 21px;
    line-height: 21px;
    color: var(--grey_light);
    font-family: var(--header_font);
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
  }

  .otslr-site-header__inner nav ul > li > a.active:after {
   content: '';
   height: 3.5px;
   width: 100%;
   left: 0;
   background-color: var(--cyan);
   bottom: -7px;
   position: absolute;
   border-radius: 7px;
 }

 .otslr-main-search__inner {
  position: relative;
 }

 .otslr-main-search__inner input[type=search] {
height: 56px;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  width: 428px;
  padding-left: 20px;
  background: rgba(255,255,255,.13);
  color: var(--grey_light);
 }

 .otslr-main-search__inner input[type=search],
 .otslr-main-search__inner input[type=search]:placeholder {
  font-size: 21px;
  line-height: 21px;
  color: var(--grey_light);
 }

 .otslr-main-search__inner button.otslr-button--search {
position: absolute;
  height: 56px;
  align-items: center;
  top: 0;
  right: 0;
  outline: none;
  background: var(--white);
  width: 70px;
  background: rgba(255,255,255,.13);
 }

 .otslr-deals {
    display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
 }



aside.otslr-main-aside {
  width: 265px;
  background-color: var(--black_aa);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 49px;
  padding-left: 20px;
  padding-right: 20px;
}

aside.otslr-main-aside nav ul > li {
  list-style: none;
}

aside.otslr-main-aside nav ul > li > a {
  font-size: 14px;
  line-height: 14px;
  font-family: var(--header_font);
  font-weight: 700;
  height: 56px;
  display: flex;
  align-items: center;
  color: var(--white);
  justify-content: flex-start;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

aside.otslr-main-aside nav ul {
  padding: 0;
  margin: 0;
}

aside.otslr-main-aside nav ul > li > a.active {
  background-color: var(--black_alt);
}



.otslr-aside-logo {
  display: flex;
  justify-content: center;
  height: 105px;
  align-items: center;
  margin-bottom: 49px;
}

.otslr-menu-preamble {
  position: relative;
  margin-bottom: 7px;
    
}

.otslr-menu-preamble span {
  display: block;
  color: var(--grey_light);
  font-size: 13px;
  line-height: 14px;
  text-transform: lowercase;
}

.otslr-menu-preamble:after {
  position: relative;
  background-color: var(--border_color);
  width: 100%;
  height: 3.5px;
}


.otslr-gradient {
  background: linear-gradient(
    to bottom,
    #101010 0%,
    #1a1a1a 15%,
    #2a2a2a 25%,
    #4a4a4a 35%,
    #6a6a6a 50%,
    #8a8a8a 65%,
    #aaaaaa 80%,
    #cacaca 90%,
    #ffffff 100%
  );
}

.otslr-app-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  padding-bottom: 140px;
}

.otslr-main-col {
  max-width: 787px;
}

.otslr-main-with-aside {
  margin-bottom: 42px;
}

.otslr-featured-primary {
  height: 357px;
  width: 100%;
  max-width: 787px; 
  margin-bottom: 28px;
  width: 100%;
}

.otslr-featured-primary__inner {
  height: 357px;
  position: relative;
}

.otslr-featured-primary__bg {
  position: absolute;
  background: rgba(16, 16, 16, 0.5);
  height: 100%;
  width: 100%;
}

.otslr-featured-primary__preview {
  background: rgba(16, 16, 16, 0.8);
  padding: 21px 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.otslr-featured-primary__title h2 {
  font-size: var(--h2_font_size);
  line-height: var(--h2_line_height);
  color: var(--grey_light);
  margin-bottom: 7px'
}

.otslr-featured-primary__excerpt {
  margin-bottom: 14px;
}

.otslr-featured-primary__excerpt p {
  font-size: var(--p_font_size);
  line-height: var(--p_line_height);
  color: var(--white);
  max-width: 625px;
}

.otslr-featured-primary__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.otslr-featured-secondary-wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 787px;

}

.otslr-featured-secondary {
  height: 357px;
  width: 100%;
  max-width: 384px; 
}

.otslr-featured-secondary__inner {
  height: 357px;
  position: relative;
}

.otslr-featured-secondary__bg {
  position: absolute;
  background: rgba(16, 16, 16, 0.5);
  height: 100%;
  width: 100%;
}

.otslr-featured-secondary__preview {
  background: rgba(16, 16, 16, 0.8);
  padding: 21px 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.otslr-featured-secondary__title h2 {
  font-size: 21px;
  line-height: 28px;
  color: var(--grey_light);
  margin-bottom: 7px'
}

.otslr-featured-secondary__excerpt {
  margin-bottom: 14px;
}

.otslr-featured-secondary__excerpt p {
  font-size: var(--p_font_size);
  line-height: var(--p_line_height);
  color: var(--white);
  max-width: 625px;
}

.otslr-featured-secondary__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.otslr-button--link {
  color: var(--cyan);
  text-transform: lowercase;
  font-weight: 700;
  font-family: var(--header_font);
  font-size: 21px;
  line-height: 21px;
  text-decoration: none;
}

.otslr-featured-primary__tag span,
.otslr-featured-secondary__tag span {
  height: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  line-height: 28px;
  font-family: var(--header_font);
  background-color: var(--alt);
  width: 218px;
  font-weight: 700;
  color: var(--grey_light);
}

section.otslr-commune.otslr-commune--aside {
  display: flex;
  justify-content: flex-start;
}

.otslr-commune__inner {
  background-color: var(--black_aa);
  border-top: 14px solid var(--black_alt);
  max-width: 787px;
  padding: 42px 20px;
  width: 100%;
}

.otslr-commune article {
  padding-bottom: 21px;
  margin-bottom: 21px;
}

.otslr-commune article:not(:last-child) {
  border-bottom: 3.5px solid var(--grey_light);
}

.otslr-commune article .otslr-entry__meta {
  color: var(--grey_light);
  font-family: var(--body_font);
}

.otslr-commune article .otslr-entry__meta p {
  margin-bottom: 7px;
  font-size: 12px;
  line-height: 14px;
}

.otslr-commune article .otslr-entry__meta a {
  color: var(--white);
  font-family: var(--header_font);
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  line-height: 14px;
}

.otslr-entry__inner {
  display: flex;
  justify-content: space-between;
}

.otslr-entry__title h4 a {
  color: var(--white);
  font-size: 18px;
  line-height: 21px;
  font-family: var(--header_font);
  margin-bottom: 7px;
  text-decoration: none;
}

.otslr-entry__body {
  max-width: 600px;
  padding-right: 20px;
}

.otslr-entry__body p {
  color: var(--grey_light);
  font-size: 12px;
  line-height: 14px;
  font-family: var(--body_font);
  margin-bottom: 7px;
}

.otslr-entry__date time {
  color: var(--white);
  font-size: 12px;
  line-height: 14px;
  font-family: var(--header_font);
  margin-bottom: 7px;
}

.otslr-entry__thumbnail {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  height: 70px;
  width: 210px;
}


sidebar.otslr-main-side {
  width: 400px;
}

.otslr-newsletter {
  border-top: 14px solid var(--black_alt);
}

.otslr-newsletter__inner {
  border-top: 14px solid var(--black_alt);
  background: rgba(16, 16, 16, 0.33);
  height: 273px;
  width: 400px;
  padding: 21px 20px;
}

.otslr-newsletter__inner h5 {
  color: var(--white);
  line-height: 28px;
  font-size: 21px;
  margin-bottom: 42px;
  position: relative;
}

.otslr-newsletter__inner img {
  position: absolute;
  bottom: -7px;
}

.otslr-newsletter__inner input[type=email] {
  color: var(--white);
  line-height: 16px;
  font-size: 16px;
  margin-bottom: 42px;
  height: 49px;
  padding-left: 20px;
  background-color: rgba(229, 229, 229, 0.6);
  border: none;
  outline: none;
  width: 71%;
}

.otslr-newsletter__input-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.otslr-newsletter__button {
   height: 49px;
   color: var(--white);
  line-height: 16px;
  font-size: 16px;
  outline: none;
  border: none;
text-transform: uppercase;
background-color: var(--alt);
font-family: var(--body_font);
width: 26%;
}

.otslr-side-roll__inner {
  background-color: var(--white);
}

.otslr-aa-play {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.otslr-side-roll__inner h4 a {
  background-color: var(--white);
  font-size: 28px;
  line-height: 35px;
  color: var(--alt);
  font-family: var(--body_font);
  font-weight: 700;
  text-decoration: none;
}

.otslr-side-roll__inner span {
  font-size: 14px;
  line-height: 14px;
  color: var(--black_text);
  font-family: var(--body_font);
}

.otslr-side-roll__data {
  padding: 21px 20px;
}


.otslr-single-title-wrapper {
  background: var(--white);
  padding: 21px;
  margin-bottom: 21px;
}
.otslr-single-title__breadcrumb span,
.otslr-single-title__breadcrumb a {
  font-size: 21px;
  line-height: 42px;
  color: var(--alt);
  font-family: var(--header_font);
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
}

.otslr-featured-title__title h1 {
  font-size: 42px;
  line-height: 49px;
  font-weight: 700;
}

.otslr-single-hero-wrapper {
  display: flex;
  margin-bottom: 21px;
}

.otslr-single-hero-wrapper > div {
  width: 50%;
  height: 350px;
}

.otslr-single-hero__image-inner {
  height: 100%;
  width: 100%;
  position: relative;
}

.otslr-single-hero__bg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(16, 16, 16, 0.5);
}

.otslr-single-hero__sub {
  background-color: var(--white);
  padding: 21px 20px;
}



.otslr-single-hero__sub-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}


.otslr-single-hero__sub p,
.otslr-single-hero__sub time {
  
  display: block;
}

.otslr-single-hero__sub p {
  margin-bottom: 7px;
}

.otslr-single-hero__sub time {
margin-bottom: 14px;
}

.otslr-single-hero__subtitle h2 {
  font-size: 21px;
  line-height: 28px;
  font-family: var(--body_font);
  color: #131313;
  font-weight: bold;
}

.otslr-single-hero__author p,
.otslr-single-hero__author a {
  font-size: 18px;
  line-height: 21px;
}

.otslr-single-hero__author p {
  color: var(--black_text);
  font-family: var(--body_font);
}
.otslr-single-hero__author a {
  color: var(--alt);
  font-weight: 700;
  font-family: var(--body_font);
  text-decoration: none;
}

.otslr-single-hero__date {
  font-size: 14px;
  line-height: 21px;
  font-family: var(--body_font);
  font-weight: 700;
}

.otslr-single-hero__disclaimer {
  position: relative;
}

.otslr-single-hero__disclaimer:before {
  content: '';
  height: 3.5px;
  background-color: rgba(16, 16, 16, 0.1);
  border-radius: 7px;
  width: 100%;
  position: absolute;
  top: -7px;
}

.otslr-single-hero__disclaimer small {
  font-size: 12px;
  line-height: 14px;
  font-style: italic;
}


.otslr-article-card__user {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 21px;
}

figure {margin-bottom: 0;}

.otslr-article-card__user-photo {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.otslr-indent {
  padding-left: 55px;
  padding-right: 55px;
}

.otslr-article-card__inner p {
  font-size: 21px;
  line-height: 28px;
}

.otslr-article-card__inner .otslr-article-card__user-bio p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;
}



/* Base card styling */
.otslr-article-card {
    border-radius: 0;
    padding: 42px 20px;
    margin-bottom: 21px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Inner layout */
.otslr-article-card__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* User & intro (empty by default) */
.otslr-article-card__user,
.otslr-article-card__intro {
    min-height: 20px;
}

/* At-a-glance section */
.otslr-article-card__at-a-glance-inner {
    border-top: 1px solid #ccc;
    padding-top: 1rem;
}

.otslr-article-card__glance-title h5 {
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Glance table layout */
.otslr-article-card__glance-table {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Table rows */
.otslr-article-card__glance-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 20px;
    border: 1px solid #e9ecef;
    border-radius: 7px;
    background-color: #f8f9fa;
}

/* Table cells */
.otslr-article-card__glance-cell {
    flex: 1;
}

.otslr-article-card__glance-cell--left h6 {
    font-size:14px;
    font-weight: 600;
    margin-bottom: 7px;
    color: #495057;
}

.otslr-article-card__glance-cell--left a {
    font-weight: 500;
    text-decoration: none;
    color: var(--alt);
}

.otslr-article-card__glance-cell--right {
    text-align: right;
}

/* Amazon-style button */
.otslr-glance-button {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-weight: 600;
    font-size: 0.875rem;
    background-color: #ffe599;
    border: 1px solid #f0c36d;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: #000;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.otslr-glance-button:hover {
    background-color: #ffd966;
    text-decoration: none;
}

.article-card-product > h2 {
  font-size: 28px;
  line-height: 42px;
  margin-bottom: 21px;
}


.article-card-product__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 21px;
}

.article-card-product__info h3 {
  margin-bottom: 21px;
  font-size: 21px;
  line-height: 28px;
  text-align: center;
  font-family: var(--header_font);
}

.article-card-product__info h3 span {
  display: block;
}

.article-card-product__aff-links {
  margin-bottom: 0.5rem;
}

.article-card-product__aff-option-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.article-card-product__aff-option-button:hover {
  background-color: #e0e0e0;
}

.article-card-product__aff-option-button span:first-child {
  margin-right: 0.5rem;
  font-weight: bold;
}