/* Hide captions on homepage */
body.homepage .thumbnails .title,
body.homepage .thumbnails .title span,
body.homepage .thumbnails .thumbnail .title {
  display: none !important;
  visibility: hidden !important;
}

/* Show captions only on Unscripted, Branded, and Editorial pages */
body.unscripted .thumbnails .title,
body.unscripted .thumbnails .title span,
body.unscripted .thumbnails .thumbnail .title,
body.branded .thumbnails .title,
body.branded .thumbnails .title span,
body.branded .thumbnails .thumbnail .title,
body.editorial .thumbnails .title,
body.editorial .thumbnails .title span,
body.editorial .thumbnails .thumbnail .title {
  display: block !important;
  visibility: visible !important;
  color: rgba(0, 0, 0, 0.9);
  font-family: "Monument Grotesk", Icons;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.3;
  margin-top: 1.2rem;
  margin-bottom: 0.1rem;
  text-align: left;
}

nav a::after {
  content: none !important;
  border-bottom: none !important;
}

nav a,
nav a:visited,
nav a:hover,
nav a:focus,
nav a:active {
  text-decoration: none !important;
  border-bottom: none !important;
  outline: none !important;
}
/**
 * Content
 */

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: 0.4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	line-height: 1.3;
	font-family: 'Neue Haas Grotesk', Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(41, 41, 41, 0.3);
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.3rem;
	font-weight: 414;
	color: rgba(0, 0, 0, 0.9);
	font-family: "Monument Grotesk Mono Variable", Icons;
	font-style: normal;
	line-height: 2;
    letter-spacing: 0.03em;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.9);
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.9);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Monument Grotesk Mono Variable", Icons;
	font-style: normal;
	font-weight: 785;
	padding: 0;
	margin: 0;
	font-size: 2rem;
	line-height: 1.8;
	color: rgba(0, 0, 0, 0.9);
    letter-spacing: 0.01em;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] h2 {
	font-family: "Monument Grotesk Mono Variable", Icons;
	font-style: normal;
	font-weight: 414;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.9);
	font-size: 1.3rem;
	line-height: 1.3;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.3;
	font-family: "Monument Grotesk Mono", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.9);
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.9);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(255, 255, 255) /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100%/*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 5.7rem /*!main_margin*/;
	padding-bottom: 5.7rem /*!main_margin*/;
	padding-left: 5.7rem /*!main_margin*/;
	padding-right: 5.7rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.6rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -1.2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.6rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1.2rem/*!responsive_thumbnails_padding*/; 
}




/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.9);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: .6rem /*!site_menu_button*/;
	right: .6rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 40px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1.2rem /*!shop_button*/;
	right: 1.2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 2.2rem;
    padding: 0;
    line-height: 1.2;
	font-style: normal;
	font-weight: 400;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 46px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.9);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: "Neue Haas Grotesk", Icons;
    color: rgba(0, 0, 0, .9);
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .8rem 2.5rem .8rem 1rem;
}

.shop_product .button {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.8) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: "Neue Haas Grotesk", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.3rem;
    line-height: 3.5;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

/* kill template underlines on heading links used for top nav */
[data-predefined-style="true"] h1 a,
[data-predefined-style="true"] h2 a,
[data-predefined-style="true"] small a {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

/* keep everything else consistent too */
a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
  outline: none;
}

/* just in case the theme draws a line with a pseudo-element */
a::after {
  content: none !important;
  border-bottom: 0 !important;
}

/* --- Hover caption for category grids (Branded / Unscripted / Editorial) --- */

/* The anchor is already relative/overflow hidden in your CSS */
.thumbnails .thumbnail > a::after {
  content: attr(data-caption);                 /* pulls text from HTML attribute */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* match your homepage chip style */
  background: rgba(230, 251, 145, 0.4);
  color: rgba(0, 0, 0, 1);
  font-family: "Monument Grotesk Mono", Icons;
  font-weight: 500;
  font-size: 1rem;

  padding: 0.5rem 1.2rem 0.7rem;
  margin: 2.4rem;

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;                        /* don’t block clicks */
}

/* show on hover and keyboard focus */
.thumbnails .thumbnail > a:hover::after,
.thumbnails .thumbnail > a:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* optional: disable on touch/mobile */
body.mobile .thumbnails .thumbnail > a::after {
  opacity: 0 !important;
}

/* protect against theme underlines in grids */
.thumbnails .thumbnail > a,
.thumbnails .thumbnail > a:hover,
.thumbnails .thumbnail > a:focus,
.thumbnails .thumbnail > a:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
  outline: none;
}

/* --- Hover caption for gallery_card thumbnails --- */
a.gallery_card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none !important;
  border: none !important;
}

a.gallery_card::after {
  content: attr(data-caption);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(230, 251, 145, 0.4);
  color: rgba(0, 0, 0, 1);
  font-family: "Monument Grotesk Mono", Icons;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 1.2rem 0.7rem 1.2rem;
  margin: 2.4rem;

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

/* show the caption on hover */
a.gallery_card:hover::after,
a.gallery_card:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* disable on touch/mobile if desired */
body.mobile a.gallery_card::after {
  opacity: 0 !important;
}

/***** HOVER CAPTIONS: Branded / Unscripted / Editorial ONLY *****/

/* Hide standard below-image captions on these pages */
body.branded .thumbnails .title,
body.unscripted .thumbnails .title,
body.editorial .thumbnails .title {
  display: none !important;
  visibility: hidden !important;
}

/* Create hover chip using the data-caption attribute */
body.branded .thumbnails .thumbnail > a,
body.unscripted .thumbnails .thumbnail > a,
body.editorial .thumbnails .thumbnail > a {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none !important;
  border: none !important;
}

body.branded .thumbnails .thumbnail > a::after,
body.unscripted .thumbnails .thumbnail > a::after,
body.editorial .thumbnails .thumbnail > a::after {
  content: attr(data-caption);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(230, 251, 145, 0.4); /* same as your chip color */
  color: rgba(0, 0, 0, 1);
  font-family: "Monument Grotesk Mono", Icons;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 1.2rem 0.7rem;
  margin: 2.4rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

/* Reveal on hover/focus */
body.branded .thumbnails .thumbnail > a:hover::after,
body.branded .thumbnails .thumbnail > a:focus-visible::after,
body.unscripted .thumbnails .thumbnail > a:hover::after,
body.unscripted .thumbnails .thumbnail > a:focus-visible::after,
body.editorial .thumbnails .thumbnail > a:hover::after,
body.editorial .thumbnails .thumbnail > a:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Disable on touch/mobile devices */
body.mobile .thumbnails .thumbnail > a::after {
  opacity: 0 !important;
}

/* Navigation hover caption */
nav a {
  position: relative;
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
  transition: all 0.25s ease;
}

nav a::after {
  content: attr(data-hover); /* uses custom attribute from Cargo page name */
  position: absolute;
  left: 50%;
  bottom: -1.5em;
  transform: translateX(-50%);
  font-family: "Monument Grotesk Mono", Icons;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

nav a:hover::after {
  opacity: 1;
  transform: translate(-50%, -0.2em);
}

/* Hide default Cargo-generated navigation links at top left */
body .page-links,
body .page-links a {
  display: none !important;
  visibility: hidden !important;
}

/* Hide stray blue page links in top-left corner */
body .page-links,
body .page-links a,
body .set-links,
body .set-links a,
body .nav-links,
body .nav-links a,
body .content-top a,
body > a:first-of-type {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Hide stray links injected in custom HTML */
customhtml a[href="/branded"],
customhtml a[href="/unscripted"],
customhtml a[href="/editorial"] {
  display: none !important;
  visibility: hidden !important;
}