/* LoveThisPic design v2 (2026-10-28). Loaded after responsive.css when params['ltp_v2_live'] is set or the owner preview cookie is present. */

/* 1. One font everywhere: the old 'Helvetica Neue LT' web fonts are mapped to the system font already on the device (no downloads). The 'ltp-icons' icon font is untouched. */
@font-face { font-family: 'HelveticaNeueLTStd35Thin'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Segoe UI'), local('Roboto'), local('Arial'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeueLTStdLt'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Segoe UI'), local('Roboto'), local('Arial'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeueLTStd55Roman'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Segoe UI'), local('Roboto'), local('Arial'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeueLTStd-ThCn'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Segoe UI'), local('Roboto'), local('Arial'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeueLTStd65Medium'; src: local('HelveticaNeue-Medium'), local('Helvetica Neue Medium'), local('Segoe UI Semibold'), local('Roboto Medium'), local('Arial'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeueLTStd75Bold'; src: local('HelveticaNeue-Bold'), local('Helvetica Neue Bold'), local('Segoe UI Bold'), local('Roboto Bold'), local('Arial Bold'), local('Arial'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeueLTStd95Black'; src: local('HelveticaNeue-Bold'), local('Helvetica Neue Bold'), local('Segoe UI Bold'), local('Roboto Bold'), local('Arial Bold'), local('Arial'); font-weight: normal; font-style: normal; font-display: swap; }
body.ltp-v2, body.ltp-v2 input, body.ltp-v2 button, body.ltp-v2 select, body.ltp-v2 textarea { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
body.ltp-v2 { -webkit-font-smoothing: antialiased; color: #222; }

/* 2. Picture thumbnails as cards; titles under the picture on tablets and computers */
body.ltp-v2 #content ul.picture-list > li, body.ltp-v2 #ltp-below ul.picture-list > li { position: relative; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .15s ease; margin: 0 !important; width: auto !important; height: auto !important; }
body.ltp-v2 #content ul.picture-list > li:hover, body.ltp-v2 #ltp-below ul.picture-list > li:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.10), 0 10px 24px rgba(0,0,0,.08); }
body.ltp-v2 #content ul.picture-list > li > a:first-child img, body.ltp-v2 #ltp-below ul.picture-list > li > a:first-child img { display: block; width: 100%; height: auto; aspect-ratio: 195 / 163; object-fit: cover; }
body.ltp-v2 ul.picture-list > li > .heading { display: none !important; }
@media (min-width: 768px) {
  body.ltp-v2 #content ul.picture-list > li > .footer, body.ltp-v2 #ltp-below ul.picture-list > li > .footer { display: block !important; position: static; height: auto; width: auto; background: none; padding: 8px 10px 10px; top: auto; }
  body.ltp-v2 ul.picture-list > li > .footer .heart-off, body.ltp-v2 ul.picture-list > li > .footer .heart-on, body.ltp-v2 ul.picture-list > li > .footer ul.list { display: none !important; }
  body.ltp-v2 ul.picture-list > li > .footer .caption h3 { margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
  body.ltp-v2 ul.picture-list > li > .footer .caption h3 a { color: #333; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.ltp-v2 ul.picture-list > li:hover > .footer .caption h3 a { color: #c9302c; }
}
@media (max-width: 767px) { body.ltp-v2 #content ul.picture-list > li, body.ltp-v2 #ltp-below ul.picture-list > li { border-radius: 6px; } body.ltp-v2 ul.picture-list > li > .footer { display: none !important; } }
body.ltp-v2 .gif-icon { transform: scale(.85); transform-origin: right bottom; opacity: .95; }

/* 3. Sort buttons as pills */
body.ltp-v2 #content .heading .sort-box { display: flex; align-items: center; gap: 8px; float: none; margin: 10px 0 6px; padding-top: 0; }
body.ltp-v2 #content .heading .sort-box > span { float: none; margin: 0 4px 0 0; color: #6b6b6b; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; }
body.ltp-v2 #content .heading .sort-box ul.sort-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; float: none; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li { float: none; width: auto !important; background: none !important; margin: 0; padding: 0; position: relative; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li > a { display: inline-block; padding: 7px 16px; border: 1px solid #c9302c; border-radius: 999px; background: #fff; color: #c9302c !important;
  font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li > a::after { content: ' \25BE'; font-size: 11px; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li > a:hover, body.ltp-v2 #content .heading .sort-box ul.sort-list > li > a:focus { background: #c9302c; color: #fff !important; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li > div { background: #fff !important; border: 1px solid #e6e6e6; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; min-width: 150px; z-index: 20; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li > div a { display: block; padding: 8px 12px; border-radius: 6px; color: #333 !important; font-size: 14px; text-decoration: none; background: none !important; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li > div a:hover { background: #fff1f1 !important; color: #c9302c !important; }

/* 4. Footer */
body.ltp-v2 .footer-block { background: #1c1c1c; color: #bdbdbd; padding: 32px 16px 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; float: none; height: auto; }
body.ltp-v2 .footer-block .footer-logo { float: none; margin: 0; order: 1; }
body.ltp-v2 .footer-block .ltp-footer-popular { order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
body.ltp-v2 .footer-block .ltp-footer-popular span { width: 100%; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #8d8d8d; margin-bottom: 2px; }
body.ltp-v2 .footer-block .ltp-footer-popular a { display: inline-block; padding: 7px 14px; border: 1px solid #3c3c3c; border-radius: 999px; color: #e6e6e6; font-size: 14px; text-decoration: none; }
body.ltp-v2 .footer-block .ltp-footer-popular a:hover { border-color: #e64946; color: #fff; }
body.ltp-v2 .footer-block .footer-links { order: 3; float: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 4px 0 0; }
body.ltp-v2 .footer-block .footer-links a.footer-link { float: none; display: inline-block; padding: 6px 2px; margin: 0; color: #e6e6e6; font-size: 14px; text-transform: none; text-decoration: none; }
body.ltp-v2 .footer-block .footer-links a.footer-link:hover { color: #fff; text-decoration: underline; }
body.ltp-v2 .footer-block .copy { order: 4; float: none; font-size: 12px; color: #8d8d8d; font-style: normal; margin: 0; }
body.ltp-v2 .footer-block .clear { display: none; }

/* 8. Ad placeholder: light, labelled space while the ad loads (space stays reserved) */
body.ltp-v2 #content .ad-holder { background: #f7f7f7; border-radius: 6px; }
body.ltp-v2 .ad-holder .ad-label { color: #8a8a8a; background: transparent; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }

/* 9. Header polish */
body.ltp-v2 #floating-header { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
body.ltp-v2 #floating-header .floating-button-left, body.ltp-v2 #floating-header .floating-button-right { background-color: #c9302c; }

/* 7. Blog posts: comfortable reading */
body.ltp-v2 #main.blog #content > .description, body.ltp-v2 #main.blog #content > .step { max-width: 720px; margin-left: 0; margin-right: 0; }
body.ltp-v2 #main.blog #content > .description, body.ltp-v2 #main.blog .step-instructions, body.ltp-v2 #main.blog .step-instructions p { font-size: 18px; line-height: 1.7; color: #2b2b2b; text-align: left; }
body.ltp-v2 #main.blog .step-instructions h2 { font-size: 22px; line-height: 1.3; font-weight: 700; color: #222; margin: 22px 0 10px; }
body.ltp-v2 #main.blog .step-image img { border-radius: 10px; max-width: 100%; height: auto; }
body.ltp-v2 #main.blog h1.title { font-size: 30px; line-height: 1.25; font-weight: 800; color: #1f1f1f; max-width: 820px; margin-left: 0; margin-right: 0; }
@media (max-width: 767px) { body.ltp-v2 #main.blog #content > .description, body.ltp-v2 #main.blog .step-instructions, body.ltp-v2 #main.blog .step-instructions p { font-size: 17px; padding: 0 12px; }
  body.ltp-v2 #main.blog h1.title { font-size: 24px; padding: 0 12px; } }

/* 11. Consistent spacing between major sections */
body.ltp-v2 #content > .top-viewed-today, body.ltp-v2 #ltp-below > .top-viewed-today { margin-top: 40px; }

/* Sort pills size to their text (old fixed widths: #size-dropdown 30px, #top-viewed-dropdown 45px) so the arrow sits on the right */
body.ltp-v2 #content .heading .sort-box ul.sort-list > li, body.ltp-v2 #content .heading .sort-box ul.sort-list > li > a,
body.ltp-v2 #content .heading .sort-box #size-dropdown, body.ltp-v2 #content .heading .sort-box #top-viewed-dropdown { width: auto !important; min-width: 0 !important; white-space: nowrap; }
body.ltp-v2 #content .heading .sort-box ul.sort-list > li > a { padding: 7px 16px !important; font-size: 14px !important; }

/* Phones: keep the 2-per-row tiles (m.css used width 48% + padding-bottom 42%); as a grid with a fixed tile shape so cards don't collapse */
@media (max-width: 767px) {
  body.ltp-v2 #content ul.picture-list, body.ltp-v2 #ltp-below ul.picture-list { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 8px 16px !important; overflow: visible; }
  body.ltp-v2 #content ul.picture-list > li, body.ltp-v2 #ltp-below ul.picture-list > li { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding-bottom: 0 !important; aspect-ratio: 8 / 7; }
}