/** Shopify CDN: Minification failed

Line 19:20 Expected identifier but found whitespace
Line 19:22 Unexpected "{"
Line 19:32 Expected ":"
Line 20:21 Expected identifier but found whitespace
Line 20:23 Unexpected "{"
Line 20:33 Expected ":"
Line 21:22 Expected identifier but found whitespace
Line 21:24 Unexpected "{"
Line 21:34 Expected ":"
Line 22:21 Expected identifier but found whitespace
... and 15 more hidden warnings

**/

/*SITE GLOBALS*/
:root {
  --color-off-white: {{ settings.color_off_white }};
  --color-lights-out: {{ settings.color_lights_out }};
  --color-blockbuster: {{ settings.color_blockbuster }};
  --color-red-carpet: {{ settings.color_red_carpet }};
  --color-matrix-green: {{ settings.color_matrix_green }};
  --color-screen-glow: {{ settings.color_screen_glow }};
  --color-popcorn: {{ settings.color_popcorn }};
  --color-bubblegum: {{ settings.color_bubblegum }};
}



/*HOMEPAGE CSS ELEMENTS*/

.arch-center h2 {
  color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Heading/H3 */
font-family: "Awesome Serif VAR";
font-size: 56px;
font-style: normal;
font-weight: 350;
line-height: 105%; /* 58.8px */
}

.arch-center p {
  color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Body/Body 2 */
font-family: "Univers Next Pro";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
letter-spacing: 0.4px;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

.footer__block {
  margin-right: 250px;
}
.footer__block--menu {
  padding-top: 91px;
  margin: 0px;
}
.footer__block__title {
  font-family: "Roc Grotesk";
  font-size: 22px;
  text-align: center;
  font-weight: 750;
  text-transform: uppercase;
}
.footer__quicklinks {
  font-family: "Univers Next Pro";
  font-size: 18px;
  text-align: center !important;
}
.footer__block .rte {
  font-family: "Univers Next Pro";
  font-size: 18px;
  text-align: center !important;
}
.footer__block .rte h4 {
  font-family: "Roc Grotesk" !important;
  font-size: 22px;
  font-weight: 750;
  text-transform: uppercase;
  padding-top: 30px;
  text-align: center !important;
}
/* Footer accordion title: center the text, keep arrow on the right */
footer summary.footer__block__title.heading-x-small.accordion__title {
  position: relative;
  display: flex;
  justify-content: center;   /* centers the text node */
  align-items: center;
  width: 100%;
  text-align: center;
}

/* Arrow icon pinned to the right, not affecting centering */
footer summary.footer__block__title.heading-x-small.accordion__title svg.icon-nav-arrow-down {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}






/* Center the footer logo block + image */
.site-footer .footer__block__image{
  width: 100% !important;          /* override the inline width:320px constraint */
  max-width: 320px;               /* keep your intended logo width */
  margin-left: auto !important;
  margin-right: auto !important;
}

.site-footer .footer__block__image .image-wrapper,
.site-footer .footer__block__image figure{
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.site-footer .footer__block__image img{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}





/* --------------------------------------------------
   PRODUCT TEMPLATE — FINAL (REFERENCE-CORRECT)
-------------------------------------------------- */

/* Main product inner container */
.product__wrapper__inner {
  width: 100%;
  max-width: none !important;
  padding-left: 115px;
  padding-right: 115px;
  margin: 0;
  box-sizing: border-box;
}

/* --------------------------------------------------
   TITLE + PRICE ROW (GRID)
-------------------------------------------------- */

.template-product .product-title-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  width: 100%;
  align-items: stretch;
  box-sizing: border-box;

  /* neutralise Broadcast spacing */
  --block-padding-bottom: 0px;
}

/* Kill Broadcast padding on the two grid items in THIS row */
.template-product .product-title-price-row > .product_block,
.template-product .product-title-price-row > .product__block {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  box-sizing: border-box;
}

/* --------------------------------------------------
   LEFT COLUMN — TITLE (FULL WIDTH + CENTERED)
-------------------------------------------------- */

/* The left grid item must allow its child to stretch */
.template-product .product-title-price-row .product_block.product_head,
.template-product .product-title-price-row .product__block.product__head {
  display: flex !important;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  min-width: 0;
}

/* Broadcast wrapper variants: force stretch chain */
.template-product .product-title-price-row .product_title_wrapper,
.template-product .product-title-price-row .product__title_wrapper,
.template-product .product-title-price-row .product__title__wrapper,
.template-product .product-title-price-row .product__title {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* The actual H1 becomes the “card” and centers the text */
.template-product .product-title-price-row h1.product_title_heading-large,
.template-product .product-title-price-row h1.product__title {
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center;
  padding: 32px;

  border-radius: 16px;
  border: 2px solid var(--Off-White, #FAF1E7);

  color: var(--Off-White, #FAF1E7);
  font-family: "Awesome Serif VAR";
  font-size: 40px;
  font-weight: 350;
  line-height: 105%;

  box-sizing: border-box;
}

/* --------------------------------------------------
   RIGHT COLUMN — PIECE COUNT + PRICE (TRUE 50/50)
-------------------------------------------------- */

/* Right grid item: stretch to row height */
.template-product .product-title-price-row .product_block:not(.product_head),
.template-product .product-title-price-row .product__block:not(.product__head) {
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

/* Stack takes full height of the right grid cell, split 50/50 */
.template-product .product-title-price-row .product-price-stack {
  width: 100%;
  height: 100%;              /* key: enables 1fr/1fr to equalize */
  min-width: 0;

  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: 16px;             /* spacing between piece + price cards */
}

/* --- TOP CARD: piece count --- */
.template-product .product-title-price-row .product-piece-count {
  width: 100%;
  min-width: 0;
  height: 100%;              /* fill its 1fr row */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 16px;
  margin: 0 !important;

  border-radius: 16px;
  border: 2px solid var(--Off-White, #FAF1E7);

  font-size: 12px;
  opacity: 0.85;
  box-sizing: border-box;
}

.template-product 
.product-title-price-row 
.product-piece-count {
color: var(--Off-White, #FAF1E7) !important;
text-align: center;

/* Cinema Puzzles/Button/Link 2 */
font-family: "Univers Next Pro";
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 18px */
}


/* --- BOTTOM CARD: price (Broadcast wraps it in .product_block.block-padding) --- */
.template-product .product-title-price-row .product-price-stack > .product_block.block-padding,
.template-product .product-title-price-row .product-price-stack > .product__block.block-padding {
  height: 100%;              /* fill its 1fr row */
  width: 100%;
  min-width: 0;

  padding: 0 !important;     /* wrapper padding breaks the equal split */
  margin: 0 !important;

  display: flex;
  align-items: stretch;
}

/* Price wrapper chain fills the bottom 50% */
.template-product .product-title-price-row .product__price_wrap,
.template-product .product-title-price-row .product__price,
.template-product .product-title-price-row .product__price > * {
  width: 100%;
  min-width: 0;
  height: 100%;

  margin: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

/* Price “card” styling */
.template-product .product-title-price-row .product__price > * {
  padding: 16px;

  border-radius: 16px;
  border: 2px solid var(--Off-White, #FAF1E7);

  color: var(--Off-White, #FAF1E7);
  font-family: "Roc Grotesk";
  font-size: 40px;
  font-weight: 800;
  line-height: 110%;
  text-transform: uppercase;
}

/* Keep the span clean */
.template-product .product_price [data-product-price] {
  display: block;
  white-space: nowrap;
}

/* price must fill full width (Broadcast wrapper fix) */

/* the wrapper that sits in the 2nd grid row must be a stretch container */
.template-product .product-title-price-row .product-price-stack > .product__block.block-padding,
.template-product .product-title-price-row .product-price-stack > .product_block.block-padding {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* force the immediate child chain to stretch horizontally */
.template-product .product-title-price-row .product-price-stack > .product__block.block-padding > *,
.template-product .product-title-price-row .product-price-stack > .product_block.block-padding > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
}

/* your markup shows .product__price_wrap (flex) -> .product__price.body-medium -> span */
.template-product .product-title-price-row .product-price-stack .product__price_wrap,
.template-product .product-title-price-row .product-price-stack .product__price_wrap > .product__price,
.template-product .product-title-price-row .product-price-stack .product__price_wrap > .product__price > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* REMOVE Shop Pay terms from title + price layout */
.template-product
.product-title-price-row
.shop-pay-terms {
  display: none !important;
}

/* REMOVE Broadcast's inline vertical padding around price */
.template-product 
.product-title-price-row 
.product__price.body-medium[data-price-wrapper] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  height: 100%;
  display: flex;
  align-items: stretch;
}



/* --------------------------------------------------
   DESCRIPTION SPACING (below the row)
-------------------------------------------------- */

.template-product .product_block.product_description,
.template-product .product_block.product_description.block-padding,
.template-product .product_block.product__description,
.template-product .product_block.product__description.block-padding,
.template-product .product__block.product__description,
.template-product .product__block.product__description.block-padding {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.template-product .product__description__content,
.template-product .product__description__content.rte {
  margin-top: 12px !important;
}

/* --------------------------------------------------
   DESCRIPTION BLOCK (UNCHANGED)
-------------------------------------------------- */



/* PRODUCT PAGE ONLY — center product description text */
.template-product .product__description__content,
.template-product .product__description__content p {
  text-align: center;
 
 
 
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro" !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
  box-sizing: border-box;


}

.template-product .product__description__content {
  border-radius: 16px;
border: 2px solid var(--Off-White, #FAF1E7);
display: flex;
padding: 32px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
margin-bottom: 40px;
}


.product__title__wrapper {
  padding-right: 0px;
}


/* --------------------------------------------------
   BUY BUTTONS - INLINE OVERRIDE
-------------------------------------------------- */

/* PRODUCT PAGE ONLY: quantity + add to cart inline */
.template-product form[action="/cart/add"] .product__submit__item--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;           /* adjust spacing */
  flex-wrap: nowrap;   /* prevent stacking/wrapping */
}

/* keep quantity a fixed block on the left */
.template-product form[action="/cart/add"] .product__submit__item--inline quantity-counter,
.template-product form[action="/cart/add"] .product__submit__item--inline .quantity-selector {
  flex: 0 0 auto;
  width: auto;
}

/* make Add to cart take remaining space */
.template-product form[action="/cart/add"] .product__submit__item--inline button[type="submit"],
.template-product form[action="/cart/add"] .product__submit__item--inline .product__submit__add {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* PRODUCT PAGE ONLY — quantity selector pill */

.template-product form[action="/cart/add"] .quantity__input {
  color: var(--Off-White, #FAF1E7) !important;
}
.template-product form[action="/cart/add"] .quantity-selector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 48px;
  padding: 0 8px;

  border-radius: 16px;
  border: 2px solid var(--Off-White, #FAF1E7);

  width: auto;          /* critical */
  min-width: 111px;
  color: var(--Off-White, #FAF1E7) !important;
text-align: center;

/* Cinema Puzzles/Button/Button 1 */
font-family: "Roc Grotesk";
font-size: 18px;
font-style: normal;
font-weight: 750;
line-height: 100%; /* 18px */
text-transform: uppercase;
}

/* prevent children from stretching */
.template-product form[action="/cart/add"] .quantity-selector * {
  flex: 0 0 auto;
}

/* quantity input — fixed, tight width */
.template-product form[action="/cart/add"] .quantity-selector input.quantity__input {
  width: 32px;          /* adjust to taste (28–36px) */
  padding: 0;
  text-align: center;
  background: transparent;
  border: none;
}

/* plus / minus buttons */
.template-product form[action="/cart/add"] .quantity-selector button {
  width: 24px;
  height: 24px;
  padding: 20px;
}

/* PRODUCT PAGE ONLY — Add to cart button styling */
.template-product form[action="/cart/add"] .product__submit__item--inline button[type="submit"],
.template-product form[action="/cart/add"] .product__submit__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 48px;                 /* match quantity pill */
  padding: 0 24px;
border: 2px solid var(--Off-White, #FAF1E7);
  border-radius: 16px;

  width: auto;                  /* critical */
  min-width: 0;
  flex: 1 1 auto;               /* fills remaining space next to qty */

  white-space: nowrap;
}
.template-product form[action="/cart/add"] .product__submit__item--inline button[type="submit"],
.template-product form[action="/cart/add"] .product__submit__add {
  flex: 0 0 auto;
}

/* PRODUCT PAGE ONLY — hide price inside Add to Cart button */
.template-product form[action="/cart/add"] .btn__price {
  display: none;
}


/* PRODUCT PAGE ONLY — Add-to-cart icon (no overlay / no motion / pinned right) */
.template-product form[action="/cart/add"] button[type="submit"][name="add"]{
  position: relative;
  padding-right: 45px; /* makes room for 22px icon + spacing */
  color: var(--Off-White, #FAF1E7);

/* Cinema Puzzles/Button/Button 1 */
font-family: "Roc Grotesk";
font-size: 18px;
font-style: normal;
font-weight: 750;
line-height: 100%; /* 18px */
text-transform: uppercase;
}

/* override Broadcast's existing ::after behavior */
.template-product form[action="/cart/add"] button[type="submit"][name="add"]::after{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;

  width: 22px !important;
  height: 22px !important;
  aspect-ratio: 1 / 1;

  display: block !important;

  background-color: transparent !important;
  background-image: url("/cdn/shop/files/cart-2_430x.svg?v=1767611952") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  transform: translateY(-50%) !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;

  pointer-events: none;
}

/* kill any hover transform the theme applies */
.template-product form[action="/cart/add"] button[type="submit"][name="add"]:hover::after{
  transform: translateY(-50%) !important;
}

/* --------------------------------------------------
   CHAT NOW PARAGRAPH ON PRODUCT PAGE
-------------------------------------------------- */



.template-product .product__block.product__text.block-padding.text-center{
  /* optional layout tuning */
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Title */
.template-product .product__block.product__text.block-padding.text-center
p.product__heading{
  margin: 0 0 8px 0 !important;

  color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Awesome Serif VAR" !important;
  font-size: 32px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
}

/* Paragraph line */
.template-product .product__block.product__text.block-padding.text-center
.product__subheading{
  margin: 0 !important;

  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* --------------------------------------------------
  LINK STYLING - PRODUCT PAGE
-------------------------------------------------- */

.template-product .product__block.product__text.block-padding.text-center
.product__subheading a{
  color: var(--Blockbuster-100, #A7B8FE) !important;

  font-family: "Roc Grotesk";
  font-size: 18px;
  font-style: normal;
  font-weight: 750;
  line-height: 100%;
  text-transform: uppercase;

  text-decoration: none;
}

/* Optional: hover */
.template-product .product__block.product__text.block-padding.text-center
.product__subheading a:hover{
  text-decoration: underline;
}
/* FIX link color in the "Need help..." text block only */
.template-product
.product__block.product__text.block-padding.text-center
.product__subheading a{
  /* kill the global gradient-text link styling */
  background-image: none !important;
  background-size: auto !important;
  background-position: initial !important;
  background-repeat: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;

  /* enforce your intended link color */
  color: var(--Blockbuster-100, #A7B8FE) !important;
}

/* optional: hover stays same color (or adjust if you want) */
.template-product
.product__block.product__text.block-padding.text-center
.product__subheading a:hover{
  color: var(--Blockbuster-100, #A7B8FE) !important;
}

/* REMOVE ::after underline on the "Need help..." link */
.template-product
.product__block.product__text.block-padding.text-center
.product__subheading a::after{
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------
  LINK STYLING - CONTACT PAGE
-------------------------------------------------- */
/* ONLY the "CHAT TO US NOW" link (matches exact href + title from your DOM) */
a[href="/pages/contact"][title="Call Sheet"]{
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;

  color: var(--Blockbuster-100, #A7B8FE) !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 100% !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

a[href="/pages/contact"][title="Call Sheet"]:hover{
  text-decoration: underline !important;
}

a[href="/pages/contact"][title="Call Sheet"]::after{
  content: none !important;
  display: none !important;
}




/* WRAPPER ---------------------------------------------------- */
.cinema-contact-form {
  max-width: 100%;
  margin: 0 ;
}

/* Blocks */
.cinema-contact-form .custom-form__block {
  margin-bottom: 16px;
}

/* BASE INPUT / SELECT / TEXTAREA ----------------------------- */
.cinema-contact-form .field,
.cinema-contact-form .cinema-contact-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px;
  border-radius: 16px;
  border: 2px solid rgba(250, 241, 231, 0.60);
  background: transparent;

  text-align: center;
  color: rgba(250, 241, 231, 0.60);

  font-family: "Univers Next Pro", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* Textarea sizing */
.cinema-contact-form .cinema-contact-message {
  height: 180px;
  padding: 24px 16px 8px 16px;
  align-items: flex-start;
  resize: vertical;
}

/* Placeholder styles */
.cinema-contact-form .field::placeholder {
  color: rgba(250, 241, 231, 0.60);
  font-weight: 400;
}

/* Select placeholder (first option) */
.cinema-contact-form .cinema-contact-select:invalid {
  color: rgba(250, 241, 231, 0.60);
  font-weight: 400;
}

/* FOCUS STATE: blue border */
.cinema-contact-form .field:focus,
.cinema-contact-form .cinema-contact-select:focus {
  border-color: var(--Blockbuster-200-primary, #4F71FD);
  outline: none;
}

/* TYPED STATE: when there is value (inputs & textarea) */
.cinema-contact-form .field:not(:placeholder-shown),
.cinema-contact-form .cinema-contact-message:not(:placeholder-shown) {
  color: var(--Off-White, #FAF1E7);
  font-weight: 600;
}

/* TYPED STATE: when select has a real value (not placeholder) */
.cinema-contact-form .cinema-contact-select:not(:invalid) {
  color: var(--Off-White, #FAF1E7);
  font-weight: 600;
}

/* TERMS & CONDITIONS ----------------------------------------- */
.cinema-contact-terms {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 20px;
  color: #FAF1E7;

  font-family: "Univers Next Pro";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

/* Custom checkbox */
.cinema-contact-terms input[type="checkbox"] {
  width: 12.8px;
  height: 12.8px;
  flex-shrink: 0;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border-radius: 999px;
  border: 1.5px solid #FAF1E7;
  background: transparent;
  position: relative;
}

/* Checked state */
.cinema-contact-terms input[type="checkbox"]:checked {
  background: var(--Blockbuster-200-primary, #4F71FD);
  border-color: var(--Blockbuster-200-primary, #4F71FD);
}

.cinema-contact-terms input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  border: 2px solid #FAF1E7;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}


/* Center the submit block */
.custom-form__block.cinema-contact-submit {
  display: flex;
  justify-content: center;
}

/* Only this form’s button */
.custom-form__block.cinema-contact-submit .btn.btn--full {
  display: inline-flex;
  width: 250px !important;
  min-width: 0 !important;        /* <-- kills the 100% min-width */
  max-width: 250px !important;
  flex: 0 0 auto;
}



/* --------------------------------------------------
  LINK STYLING - HYGIENE PAGES
-------------------------------------------------- */
/* ONLY the privacy email link */
a[href="mailto:privacy@cinemapuzzles.com"][title="mailto:privacy@cinemapuzzles.com"]{
  /* kill global gradient / fancy link styles */
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;

  /* apply Cinema style */
  color: var(--Blockbuster-100, #A7B8FE) !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 100% !important;
  text-transform: uppercase !important;

  text-decoration: none !important;
}

/* hover */
a[href="mailto:privacy@cinemapuzzles.com"][title="mailto:privacy@cinemapuzzles.com"]:hover{
  text-decoration: underline !important;
}

/* remove theme underline pseudo-element */
a[href="mailto:privacy@cinemapuzzles.com"][title="mailto:privacy@cinemapuzzles.com"]::after{
  content: none !important;
  display: none !important;
}

/* ONLY the support email link */
a[href="mailto:support@cinemapuzzles.com"][title="mailto:support@cinemapuzzles.com"]{
  /* kill any global gradient / theme link styles */
  background-image: none !important;
  background-size: auto !important;
  background-position: initial !important;
  background-repeat: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;

  /* Cinema style */
  color: var(--Blockbuster-100, #A7B8FE) !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 100% !important;
  text-transform: uppercase !important;

  text-decoration: none !important;
}

/* hover */
a[href="mailto:support@cinemapuzzles.com"][title="mailto:support@cinemapuzzles.com"]:hover{
  text-decoration: underline !important;
}

/* remove theme ::after underline */
a[href="mailto:support@cinemapuzzles.com"][title="mailto:support@cinemapuzzles.com"]::after{
  content: none !important;
  display: none !important;
}














/* ONLY the support email link */
a[href="mailto:help@cinemapuzzles.com"][title="mailto:help@cinemapuzzles.com"]{
  /* kill any global gradient / theme link styles */
  background-image: none !important;
  background-size: auto !important;
  background-position: initial !important;
  background-repeat: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;

  /* Cinema style */
  color: var(--Blockbuster-100, #A7B8FE) !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 100% !important;
  text-transform: uppercase !important;

  text-decoration: none !important;
}

/* hover */
a[href="mailto:help@cinemapuzzles.com"][title="mailto:help@cinemapuzzles.com"]:hover{
  text-decoration: underline !important;
}

/* remove theme ::after underline */
a[href="mailto:help@cinemapuzzles.com"][title="mailto:help@cinemapuzzles.com"]::after{
  content: none !important;
  display: none !important;
}






/* ONLY the support email link */
a[href="mailto:info@cinemapuzzles.com"][title="mailto:info@cinemapuzzles.com"]{
  /* kill any global gradient / theme link styles */
  background-image: none !important;
  background-size: auto !important;
  background-position: initial !important;
  background-repeat: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;

  /* Cinema style */
  color: var(--Blockbuster-100, #A7B8FE) !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 100% !important;
  text-transform: uppercase !important;

  text-decoration: none !important;
}

/* hover */
a[href="mailto:info@cinemapuzzles.com"][title="mailto:info@cinemapuzzles.com"]:hover{
  text-decoration: underline !important;
}

/* remove theme ::after underline */
a[href="mailto:info@cinemapuzzles.com"][title="info@cinemapuzzles.com"]::after{
  content: none !important;
  display: none !important;
}






/* ONLY the support email link */
a[href="mailto:eileen@agency628.com"][title="mailto:eileen@agency628.com"]{
  /* kill any global gradient / theme link styles */
  background-image: none !important;
  background-size: auto !important;
  background-position: initial !important;
  background-repeat: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;

  /* Cinema style */
  color: var(--Blockbuster-100, #A7B8FE) !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 100% !important;
  text-transform: uppercase !important;

  text-decoration: none !important;
}

/* hover */
a[href="mailto:eileen@agency628.com"][title="eileen@agency628.com"]:hover{
  text-decoration: underline !important;
}

/* remove theme ::after underline */
a[href="eileen@agency628.com"][title="eileen@agency628.com"]::after{
  content: none !important;
  display: none !important;
}












/* --------------------------------------------------
   PRODUCT ACCORDIONS
-------------------------------------------------- */


/* Container (optional, safe) */
.template-product .drawer__inner{
  color: var(--Off-White, #FAF1E7);
  padding: 30px;
}

/* Heading row */
.template-product .drawer__head{
  margin-bottom: 40px;
  padding: 0;
  border: none !important;
}

/* Heading text: "SPECS" */
.template-product .drawer__heading{
  color: var(--Off-White, #FAF1E7);
  font-family: "Roc Grotesk" !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;


}

/* Close button (optional: keep visible, match color) */
.template-product .drawer__close{
  color: var(--Off-White, #FAF1E7);
}

/* Body wrapper */
.template-product .drawer__body{
  margin: 0;
  padding: 0 0 16px 0; /* bottom spacing before border */
  border-bottom: var(--stroke-weight-1, 1px) solid var(--Off-White, #FAF1E7);
}

/* Lists reset */
.template-product .drawer__body ul{
  margin: 0;
  padding: 0;
  list-style: none; /* we’ll draw custom dots */
}

/* List items: 16px spacing between items */
.template-product .drawer__body ul li{
  position: relative;
  margin: 0 0 16px 0;
  padding-left: 40px; /* room for 24px dot + gap */
  
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro" !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.4px;
}

/* Last item no extra gap */
.template-product .drawer__body ul li:last-child{
  margin-bottom: 0;
}

/* Custom dot */
.template-product .drawer__body ul li::before{
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--Blockbuster-100, #A7B8FE);
  position: absolute;
  left: 0;
  top: 0.15em; /* aligns dot with first line */
}

/* Paragraph text below lists */
.template-product .drawer__body p{
  margin: 16px 0 16px 40px;

  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro" !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 200%;
  letter-spacing: 0.32px;
}

/* If there are <br> line breaks inside a paragraph, keep spacing tight */
.template-product .drawer__body p br{
  line-height: 0;
}




/* --------------------------------------------------
   COLLECTIONS PAGE
-------------------------------------------------- */

.product-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.product-header-left {
  flex: 1;
}

.product-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* ONLY the main product page */

.template-product .product__submit__item.product__submit__item--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.template-product .product__submit__item--inline button {
  width: auto;
  flex: 1;
}

.template-product .product__submit__buttons {
  flex-direction: row;
  align-items: center;
}

/* --------------------------------------------------
   CINEMA CUSTOM HEADER
-------------------------------------------------- */
.cinema-custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #1A1919;
  gap: 20px;
}


/* LOGO -------------------------------------------------- */
.cinema-custom-header img {
  height: 40px !important;
  width: auto !important;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* MENU WRAPPER ------------------------------------------ */
.cch-menu-wrapper {
  overflow: hidden;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
}

/* MENU BASE --------------------------------------------- */
.cch-menu {
  display: inline-flex;
  gap: 32px;
  /* white-space: nowrap; */
  align-items: center;
}

/* MENU LINKS */
.cch-menu a {
color: var(--Off-White, #FAF1E7);

/* Cinema Puzzles/Button/Link 1 */
font-family: "Univers Next Pro";
font-size: 22px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 22px */
  opacity: 0.8;
  transition: opacity .2s ease;
}

.cch-menu a:hover {
  opacity: 1;
}

/* --------------------------------------------------
   CINEMA REEL ANIMATION — only when more than 4 items
   (assigned via Liquid: wrapper gets class "is-reel")
-------------------------------------------------- */
/* .cch-marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.cch-track {
  display: flex;
  white-space: nowrap;
  
}

.cch-set {
  display: flex;
}

.cch-set a {
  padding-right: 32px;
  white-space: nowrap;
  display: inline-block;
  flex-shrink: 0;
} */

/* @keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%);
  }
} */
/* .cch-marquee:hover .cch-track {
  animation-play-state: paused;
} */

.cinema-custom-header {
  position: relative;
  z-index: 20;
  overflow: visible !important;
  padding-left: 115px;
  padding-right: 115px;
  padding-bottom: 45px;
  padding-top: 30px;
  background: transparent !important;
}
.cch-set {
  --link: #faf1e7 !important;
}


/* --------------------------------------------------
   COMMENT THIS OUT IF YOU WANT THE CINEMA-REEL EFFECT
-------------------------------------------------- */
/* Center the menu container */
.cch-marquee {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Center the track contents */
.cch-track {
  display: flex;
  justify-content: center;
}

/* Center the actual menu links */
.cch-set {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px; /* spacing between menu items */
}

/* Clean link layout */
.cch-set a {
  white-space: nowrap;
  flex-shrink: 0;
}





/* --------------------------------------------------
   SUBSCRIBE BUTTON
-------------------------------------------------- */
.cch-subscribe {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 249.714px;
  height: 47.565px;

  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
color: var(--Off-White, #FAF1E7);

/* Cinema Puzzles/Button/Button 1 */
font-family: "Roc Grotesk";
font-size: 18px;
font-style: normal;
font-weight: 750;
line-height: 100%; /* 18px */
text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
}

/* Hover state */
.cch-subscribe:hover {
  color: var(--Popcorn-200-primary, #FEDA52);

  font-family: "Roc Grotesk";
  font-size: 18px;
  font-style: normal;
  font-weight: 750;
  line-height: 100%; /* 18px */
  text-transform: uppercase;

  /* override inline background-image from Liquid */
  background-image: url("/cdn/shop/files/Subscribe_button_container_862b0c15-053e-4536-9f59-0141e099546e_430x.png?v=1764583540") !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}


/* --------------------------------------------------
   COLLECTIONS TITLE AREA
-------------------------------------------------- */

.cp-breadcrumbs {
  font-family: "Univers Next Pro";

font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 18px */
  font-size: 14px;
  color: #FAF1E7;
    margin-bottom: 24px;
  display: flex;
  gap: 15px;
}

.cp-breadcrumbs a {
  color: #FAF1E7;
  text-decoration: none;
}

/* Base section: stop it stretching the whole page */
.highlights {
  overflow-x: hidden;
}

/* Scroll wrapper: full-bleed, scrollable, but clamped to 100vw */
.highlights__scroll {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-bottom: 12px;

  overflow-x: auto;
  overflow-y: hidden;            /* lock vertical inside the strip */
  -webkit-overflow-scrolling: touch;

  touch-action: pan-x;           /* tell touch: horizontal only */
}
/* Ensure highlight links are always clickable */
.highlights__item a,
.highlights__item-link {
  pointer-events: auto !important;
}

.highlights__scroll.is-dragging {
  cursor: grabbing;
}

  .highlights__scroll::-webkit-scrollbar {
    display: none;
  }
/* hide scrollbar, keep scroll functionality */
.highlights__scroll {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}

.highlights__scroll::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}
/* Horizontal row of cards */
.highlights__items {
  display: flex !important;          /* override Broadcast grid */
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0 24px;                   /* side padding so cards don't kiss the edge */
  width: max-content;                /* size to content so scroll works */
}

/* Individual card width (adjust if you want) */
.highlights__item {
  flex: 0 0 clamp(220px, 25vw, 320px);
}

/* Make it a bit wider on big screens */
@media (min-width: 1200px) {
  .highlights__item {
    flex: 0 0 280px;
  }
}

/* Background layer stays as you had it */
.highlights__item__background {
  position: relative;
  overflow: hidden;
}

.highlight-bg-image {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 100%;
  
}

/* Tighten mobile a bit */
@media (max-width: 630px) {
  .highlights__items {
    gap: 12px;
    padding: 0 16px;
  }

  .highlights__item {
    flex: 0 0 70vw; /* big, swipeable tiles */
  }
}

/* Reset Broadcast's slider offsets on tablet + mobile */
@media (max-width: 1024px) {
  /* Kill any transforms / snap offsets on the items row */
  .highlights__items,
  .highlights__items--mobile-slider {
    transform: none !important;
    scroll-snap-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }

  /* Make sure each highlight just sits left-aligned in the strip */
  .highlights__item {
    scroll-snap-align: none !important;
  }
}



/* --------------------------------------------------
   COLLECTIONS PRODUCT LIST AREA
-------------------------------------------------- */

.product-piece-count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
 color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Button/Link 2 */
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 18px */
}

.product-item__title {
  color: var(--Off-White, #FAF1E7);

/* Cinema Puzzles/Heading/H4 */
font-family: "Awesome Serif VAR";
font-size: 40px;
font-style: normal;
font-weight: 350;
line-height: 105%; /* 42px */
 padding-bottom: 20px;
 text-align: center !important;
}

.product-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.product-info-left {
  display: flex;
  flex-direction: column;
  
}

.piece-icon {
  display: block;
  flex-shrink: 0;
}

.product-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.product-item__price__holder .sold-out{
  color: var(--Off-White, #FAF1E7) !important;
  font-family: "Roc Grotesk";
opacity: 100% !important;
font-size: 16px !important;
font-style: normal;
font-weight: 800;
line-height: 110%; /* 35.2px */
text-transform: uppercase;
}

.popout__toggle {
color: var(--Off-White, #FAF1E7);
text-transform: capitalize !important; 
font-family: "Univers Next Pro";
font-size: 22px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 22px */
}

/* PRODUCT GRID – ADD TO CART */

.product-card-atc{
    margin-top:2rem;
    width:100%;
}

.product-card-atc form{
    width:100%;
}

.product-card-atc-btn{

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    padding:12px;

    color:#FAF1E7;
    font-family:"Roc Grotesk";
    font-size:18px;
    font-weight:750;
    line-height:1;
    text-transform:uppercase;

    border-radius:16px;
    border:2px solid #FAF1E7;

    background:transparent;

    box-sizing:border-box;
}

/* Hover */
.product-card-atc-btn:hover {
  background: #333; /* darker hover */
  transform: translateY(-1px);
}

/* Disabled state */
.product-card-atc-btn[disabled] {
  background: #999;
  cursor: not-allowed;
  transform: none;
}
.product-card-atc-icon {
  width: 15px;
  height: 15px;
  display: block;
}

.pagination-custom__page--active{
border-radius: 300px;
background: var(--Screen-Glow-10-op, rgba(214, 255, 250, 0.10));
box-shadow: 0 0 0 1px #212121;
display: flex;
height: 26px;
padding: 4px 8px;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
  }

  .pagination-custom__inner {
    color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Button/Link 2 */
font-family: "Univers Next Pro";
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 18px */
  }

  .pagination-custom__next {
        color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Button/Link 2 */
font-family: "Univers Next Pro";
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 18px */
  }
  .pagination-custom__prev {
        color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Button/Link 2 */
font-family: "Univers Next Pro";
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 100%; /* 18px */
  }

/* PRODUCT GRID — ADD TO CART ICON */
.product-card-atc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* icon */
.product-card-atc-btn::after {
  content: "";
  width: 22px;
  height: 22px;
  aspect-ratio: 1 / 1;

  background-color: currentColor;

  mask: url("/cdn/shop/files/cart-2_430x.svg?v=1767611952")
    no-repeat center / contain;
  -webkit-mask: url("/cdn/shop/files/cart-2_430x.svg?v=1767611952")
    no-repeat center / contain;

  flex-shrink: 0;
}

/* --------------------------------------------------
   FILTERS STYLING
-------------------------------------------------- */

/* ==================================================
   COLLECTION FILTER DRAWER — Cinema Puzzles styling
   (Targets the classes from your screenshots)
   ================================================== */


   .collection__sidebar__slide-out {
    padding: 40px;
   }

/* ---------- Drawer header ("FILTERS") ---------- */
.collection__sidebar__head h3{
  color: var(--Off-White, #FAF1E7);
  font-family: "Roc Grotesk"!important;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
}
.collection__sidebar__head {
  padding: 0;
  border: none;
  margin-bottom: 30px;
}

.collection__sidebar {
  padding: 10px !important;
}

.filter__price__range {
    display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.collection__filters [data-collapsible-body] {
  overflow:visible !important;
}


/* ---------- Group headings (Price / More filters etc.) ---------- */
.filter-group__heading,
.filter-group__heading span{
  color: var(--Off-White, #FAF1E7);
  font-family: "Roc Grotesk" !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
}

/* ---------- Filter list text (the labels like Franchise / Genre etc.) ---------- */
.collection-nav,
.collection-nav label,
.collection-nav label span{
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro" !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
}

/* tighten list rows a bit (optional) */
.collection-nav .sidebar__item{
  margin: 0 !important;
}
.collection-nav .sidebar__item label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

/* ---------- CHECKBOXES (custom square) ---------- */
/* hide the native checkbox */
.collection-nav .sidebar__item input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* draw the square using the label */
.collection-nav .sidebar__item label{
  position: relative;
  padding-left: 28px; /* space for the custom box */
}

/* box */
.collection-nav .sidebar__item label::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border: 1px solid var(--Off-White, #FAF1E7);
  background: transparent;
  box-sizing: border-box;
}

/* checked state */
.collection-nav .sidebar__item input[type="checkbox"]:checked + label::before{
  background: var(--Blockbuster-200-primary, #4F71FD);
  border-color: var(--Off-White, #FAF1E7);
}

/* FILTER DRAWER — hide native checkbox (keep it functional) */
.collection-nav li.sidebar__item input[type="checkbox"], /* Corrected this line */
#filter-groups input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* extra hard kill for browsers that keep drawing it */
.collection-nav input[type="checkbox"],
#filter-groups input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
}
 .collection-nav li.sidebar__item label[for="filter-More filters-5"] {
    display: none !important; /* Or opacity: 0 and pointer-events: none */
}
 .collection-nav li.sidebar__item input[type="checkbox"] + label::before {
    display: none !important; /* or adjust its appearance */
}

/* kill theme’s little right-side indicator if it exists */
.collection-nav .sidebar__item label::after{

}

/* ---------- PRICE RANGE DOTS ---------- */
.range__dot.range__dot--left,
.range__dot.range__dot--right{
  width: 24px;
  height: 24px;
  border-radius: 12px;

  background: var(--Blockbuster-200-primary, #4F71FD);
  border: 4px solid var(--White, #FFF);
  box-sizing: border-box;
}

/* if the dot contains an inner span that’s messing with visuals */
.range__dot.range__dot--left > span,
.range__dot.range__dot--right > span{
  display: none !important;
}

/* ---------- PRICE INPUTS (From / To) ---------- */
.filter__price__fields{
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Ensure slider is a vertical positioning context */
.collection__sidebar .range{
  position: relative;
}
/* Center range dots vertically on the line */
.collection__sidebar .range_dot{
  top: 50%;
  transform: translateY(-50%);
}



.filter__price__field.filter__price__from,
.filter__price__field.filter__price__to{
  display: flex;
  height: 48px;
  padding: 15.392px 0 15.392px 15.392px;
  align-items: center;
  gap: 7.696px;
  flex: 1 0 0;

  border-radius: 15.392px;
  border: 2px solid var(--Off-White, #FAF1E7);
  box-sizing: border-box;
}

/* currency + input text */
.filter__price__currency,
.filter__price__input{
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
}

/* remove default input chrome */
.filter__price__input{
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  width: 100%;
  padding: 0 !important;
}

/* ---------- PRICE SPACER (the little dash between inputs) ---------- */
.filter__price__spacer{
  width: 15.392px;
  height: 1px;
  flex-shrink: 0;
  border-radius: 1.924px;
  background: var(--Off-White, #FAF1E7);
}

/* some themes draw the dash with ::before */
.filter__price__spacer::before{
  content: "" !important;
  display: none !important;
}

/* ---------- Bottom buttons (RESET / VIEW ITEMS) ---------- */
.collection__sidebar__buttons .btn,
.collection__sidebar__buttons a.btn{
  border-radius: 16px;
  border: 2px solid var(--Off-White, #FAF1E7);

  display: flex;
  width: 304px;
  height: 42px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;

  color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Roc Grotesk";
  font-size: 18px;
  font-style: normal;
  font-weight: 750;
  line-height: 100%;
  text-transform: uppercase;

  background: transparent;
  box-sizing: border-box;
}

/* optional hover */
.collection__sidebar__buttons .btn:hover,
.collection__sidebar__buttons a.btn:hover{
  background: rgba(250, 241, 231, 0.06);
}



/* --------------------------------------------------
   CINEMA BLUE BUTTON (PNG BACKGROUND)
-------------------------------------------------- */

/* Base button */
.cinema-blue-btn {
  width: 250px !important;
  height: 47.565px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  background-image: url("/cdn/shop/files/Subscribe_button_container_430x.png?v=1763390332") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;

  background-color: transparent !important;
  border: none !important;

  color: var(--Off-White, #FAF1E7) !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
font-style: normal !important;
  padding: 0 !important;
  line-height: 1 !important;

  position: relative !important;
}

/* Text wrapper inside */
.cinema-blue-btn span {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* --------------------------------------------------
   HOVER BEHAVIOR (No dark overlay)
-------------------------------------------------- */


/* Lift effect */
.cinema-blue-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.93) !important;
} 

/* --------------------------------------------------
   CINEMA BLUE BUTTON OUTLINE (PNG BACKGROUND)
-------------------------------------------------- */

/* Base button */
.cinema-blue-btn-outline {
  width: 250px !important;
  height: 47.565px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  background-image: url("/cdn/shop/files/btn-secondary-lg_430x.png?v=1764157193") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;

  background-color: transparent !important;
  border: none !important;

color: var(--Blockbuster-200-primary, #4F71FD);
text-align: center;
font-family: "Roc Grotesk" !important;
font-size: 18px;
font-style: normal;
font-weight: 750;
line-height: 100%; /* 18px */
text-transform: uppercase;

  padding: 0 !important;
  line-height: 1 !important;

  position: relative !important;
}

/* Text wrapper inside */
.cinema-blue-btn-outline span {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* --------------------------------------------------
   HOVER BEHAVIOR (No dark overlay)
-------------------------------------------------- */


/* Lift effect
.cinema-blue-btn-outline:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.93) !important;
} */

.cinema-blue-btn,
.cinema-blue-btn:hover {
  background-image: url("/cdn/shop/files/Subscribe_button_container_430x.png?v=1763390332") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  filter: none !important;
}

.cinema-blue-btn-outline,
.cinema-blue-btn-outline:hover {
  background-image: url("/cdn/shop/files/btn-secondary-lg_430x.png?v=1764157193") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  filter: none !important;
} 

/* ----------------------------------------
   GLOBAL HOVER STYLE 1 – Lift + Brighten
---------------------------------------- */
.cinema-blue-btn.hover-cinema-blue:hover {
  color: var(--Popcorn-200-primary, #FEDA52) !important;
  filter: brightness(0.93) !important;
  transform: translateY(-1px) !important;
  background-image: url("/cdn/shop/files/Subscribe_button_container_430x.png?v=1763390332") !important;
}

/* ----------------------------------------
   GLOBAL HOVER STYLE 2 – Underline Grow
---------------------------------------- */
.cinema-blue-btn-outline.hover-cinema-outline:hover {
  color: var(--Popcorn-200-primary, #FEDA52) !important;
  filter: brightness(0.93) !important;
  transform: translateY(-1px) !important;
  background-image: url("/cdn/shop/files/btn-secondary-lg_430x.png?v=1764157193") !important;
}



/* --------------------------------------------------
   BUTTON STYLE - NO UNDERLINE
-------------------------------------------------- */
.btn--no-underline {
  text-decoration: none !important;
  border: none !important;
  background: transparent;
 
  color: var(--Off-White, #faf1e7);
  text-align: center;
  font-family: "Roc Grotesk" !important;
  font-size: 40px;
  font-style: normal;
  font-weight: 750;
  line-height: 90%;
  text-transform: uppercase;
  text-decoration: none !important;
}


/* --------------------------------------------------
   CONTACT PAGE | CONTACT FORM
-------------------------------------------------- */

/* Base broadcast overrides */
.double-contact-form input[type="text"],
.double-contact-form input[type="email"],
.double-contact-form input[type="tel"],
.double-contact-form input[type="password"],
.double-contact-form textarea,
.double-contact-form .field {
  opacity: 1 !important;
  color: var(--COLOR-TEXT, #fff) !important;
  border: 2px solid rgba(250, 241, 231, 0.60) !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.double-contact-form input::placeholder,
.double-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.double-contact-form button.btn {
  margin-top: 20px;
}

/* CONTAINER WIDTH */
.cinema-contact-wrapper {
  max-width: 592px;
  margin: 0 0 40px;
}

/* Base fields (inputs + textarea; dropdown toggle also inherits this) */
.cinema-contact-wrapper .cinema-contact-field {
  width: 100%;
  border-radius: 16px;
  border: 2px solid rgba(250, 241, 231, 0.60) !important;
  background: transparent !important;

  display: flex;
  padding: 12px;
  align-items: center;
  margin-bottom: 24px;

  color: var(--Off-White, #FAF1E7) !important;
  text-align: center;
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* Message height + padding */
.cinema-contact-wrapper .cinema-contact-message {
  height: 180px;
  padding: 24px 16px 8px 16px;
  align-items: flex-start;
}

/* Placeholders for inputs/textarea */
.cinema-contact-wrapper .cinema-contact-field::placeholder {
  color: rgba(250, 241, 231, 0.60) !important;
  text-align: center;
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* Focus state – all borders blue when any field is focused */
.cinema-contact-wrapper.cinema-contact-focused
.cinema-contact-field {
  border-radius: 16px;
  border: 2px solid var(--Blockbuster-200-primary, #4F71FD) !important;
  outline: none;
}

/* Active text state – once any field has value (inputs + textarea only) */
.cinema-contact-wrapper.cinema-contact-active
.cinema-contact-field:not(.cinema-contact-select) {
  color: var(--Off-White, #FAF1E7) !important;
  text-align: center;

  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* --------------------------------------------------
   CUSTOM DROPDOWN (replaces native <select>)
-------------------------------------------------- */
/* CLOSED PILL (TOGGLE) — ensure same styling as other placeholders */
.cinema-contact-dropdown-toggle {
  /* reset any button / field defaults */
  text-transform: none !important;
  font-family: "Univers Next Pro" !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 140%;
  letter-spacing: 0.36px;

  width: 100%;
  border-radius: 16px;
  border: 2px solid rgba(250, 241, 231, 0.50);
  

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px;
  margin-bottom: 24px;

  color: rgba(250, 241, 231, 0.60) !important;
  text-align: center;

  cursor: pointer;
}

/* label text inside the toggle (belt-and-braces) */
.cinema-contact-dropdown-label {
  text-transform: none !important;
  font-family: "Univers Next Pro" !important;
  font-weight: 400 !important;
}

/* Wrapper */
.cinema-contact-dropdown {
  position: relative;
  width: 100%;

}

/* Closed pill (toggle button) */
.cinema-contact-dropdown-toggle {
  /* base “field” look */
  width: 100%;
  border-radius: 16px;
  border: 2px solid rgba(250, 241, 231, 0.50);
  background: rgba(0, 0, 0, 0.40);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px;
  margin-bottom: 24px;

  color: rgba(250, 241, 231, 0.60);
  text-align: center;

  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 25.2px */
  letter-spacing: 0.36px;

  cursor: pointer;
}

/* marker class used by JS so it still participates in “active” logic */
.cinema-contact-select {
  /* no extra visual changes here – all styling is on .cinema-contact-dropdown-toggle */
}

/* When the dropdown has a real value */
.cinema-contact-dropdown-toggle.has-value {
  color: var(--Off-White, #FAF1E7);
  font-weight: 600 !important;
}

/* Arrow icon */
.cinema-contact-dropdown-arrow {
  font-size: 14px;
  line-height: 1;
}

/* When open, round only the top corners on the toggle */
.cinema-contact-dropdown.is-open .cinema-contact-dropdown-toggle {
  border-radius: 16px 16px 0 0;
}

/* Selected state: when a real value is chosen */
.cinema-contact-dropdown-toggle.has-value .cinema-contact-dropdown-label {
  font-weight: 600 !important;
  color: var(--Off-White, #FAF1E7);
}


/* Menu container */
.cinema-contact-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);

  margin: 0 !important;
  padding: 4px 0;
  list-style: none;

 background: var(--Lights-Out, #1A1919);


  border: 2px solid var(--Blockbuster-200-primary, #4F71FD);
  border-radius: 0 0 16px 16px;

  display: none;
  z-index: 20;
}

/* Show menu when open */
.cinema-contact-dropdown.is-open .cinema-contact-dropdown-menu {
  display: block;
}

/* Individual option */
.cinema-contact-dropdown-option {
  padding: 10px 16px;
  cursor: pointer;
  text-align: center;

  color: rgba(250, 241, 231, 0.60);
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* Hover / focus state */
.cinema-contact-dropdown-option:hover,
.cinema-contact-dropdown-option:focus {
  background: var(--Lights-Out, #1A1919);
  color: var(--Off-White, #FAF1E7);
}

/* Rounded bottom corners only on the last option */
.cinema-contact-dropdown-option:last-child {
  border-radius: 0 0 16px 16px;
}

/* --------------------------------------------------
   AUTOFILL STYLING
-------------------------------------------------- */

.cinema-contact-wrapper input.cinema-contact-field:-webkit-autofill,
.cinema-contact-wrapper input.cinema-contact-field:-webkit-autofill:hover,
.cinema-contact-wrapper input.cinema-contact-field:-webkit-autofill:focus,
.cinema-contact-wrapper textarea.cinema-contact-field:-webkit-autofill {
  -webkit-text-fill-color: var(--Off-White, #FAF1E7) !important;
  caret-color: var(--Off-White, #FAF1E7);
  border: 2px solid rgba(250, 241, 231, 0.60) !important;
  box-shadow: 0 0 0 1000px transparent inset; /* kill yellow bg */
  background-color: transparent !important;
}

/* Firefox */
.cinema-contact-wrapper input.cinema-contact-field:-moz-autofill,
.cinema-contact-wrapper textarea.cinema-contact-field:-moz-autofill {
  color: var(--Off-White, #FAF1E7) !important;
  caret-color: var(--Off-White, #FAF1E7);
  border: 2px solid rgba(250, 241, 231, 0.60) !important;
  box-shadow: 0 0 0 1000px transparent inset;
  background-color: transparent !important;
}

/* --------------------------------------------------
   TERMS & CONDITIONS
-------------------------------------------------- */

.cinema-contact-terms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 24px;

  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* fine print */
}

/* Custom checkbox */
.cinema-contact-terms input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;

  border-radius: 100px;
  border: 1px solid var(--Off-White, #FAF1E7);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

/* Checkmark tick (hidden by default) */
.cinema-contact-terms input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  width: 6px !important;
  height: 10px !important;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  opacity: 0;
}

/* Checked state: blue box + dark tick */
.cinema-contact-terms input[type="checkbox"]:checked {
  background: var(--Blockbuster-200-primary, #4F71FD);
  border-color: var(--Blockbuster-200-primary, #4F71FD);
}

.cinema-contact-terms input[type="checkbox"]:checked::after {
  border-right-color: var(--Lights-Out, #1A1919);
  border-bottom-color: var(--Lights-Out, #1A1919);
  opacity: 1;
}

/* --------------------------------------------------
   SUBMIT BUTTON
-------------------------------------------------- */

.cinema-contact-submit .btn {
  max-width: 250px;
  width: 100%;
  margin: 20px auto 0;
}

/* --------------------------------------------------
   SUCCESS STATE
-------------------------------------------------- */

.cinema-contact-success {
  width: 100%;
  min-height: 600px;
  padding: 0 !important;
  margin: 0 !important;

  background-image: url("/cdn/shop/files/filmroll_430x.png?v=1769759770");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center !important;
  text-align: center;
}

/* GENERAL: center the text brick on the contact hero */
.section-overlay-header .brick__block--text {
  
  justify-content: center;
}

.section-overlay-header .brick__block__text {

  justify-content: center;
}

/* SUCCESS STATE: allow full width + centered content */
.section-overlay-header:has(.cinema-contact-success) .brick__block__text {

  justify-content: center;
}


/* Success heading */
.cinema-contact-success__title {
  color: var(--Lights-Out, #1A1919);
  text-align: center;

  font-family: "Awesome Serif VAR";
  font-size: 56px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%; /* 58.8px */

  margin: 0 0 12px;
}

/* Success paragraph */
.cinema-contact-success__text {
  color: var(--Lights-Out, #1A1919);
  text-align: center;

  font-family: "Univers Next Pro";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 28px */
  letter-spacing: 0.4px;

  max-width: 520px;
  margin: 0 0 24px;
}

/* Success button – reuse cinema-blue-btn, just center it */
.cinema-contact-success__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* Hide hero title + intro copy when success block is present */
.section-overlay-header:has(.cinema-contact-success)
.hero__title.heading-large.block-padding.aos-animate,
.section-overlay-header:has(.cinema-contact-success)
.hero__rte.body-large.block-padding.aos-animate {
  display: none;
}

/* Let the success state use full text block width */
.section-overlay-header:has(.cinema-contact-success) .brick__block__text {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  justify-content: center !important;
}


/* --------------------------------------------------
  CUSTOMER ACCOUNTS | RECOVER PASSWORD
-------------------------------------------------- */
 .account--login .fade-toggle {
  max-width: 560px;
  justify-self: center !important;
  margin-top: 80px;
  margin-bottom:80px;

 }

 .account--login .login.fade-toggle.is-hidden {
  margin-top:30px !important;
   margin-bottom:30px !important;
 }

  .account--login .fade-toggle .page__heading {
color:  #1A1919 !important;
text-align: center;
font-family: "Awesome Serif VAR" !important;
font-size: 56px;
font-style: normal;
font-weight: 350;
line-height: 105%; 
 }

  .account--login .fade-toggle .form-message  {
 color: #1A1919 !important;
text-align: center;
font-family: "Univers Next Pro" !important;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 140%; 
letter-spacing: 0.32px;
}

  .account--login .fade-toggle .form__legal p {
    text-align: center !important;
     color: #1A1919 !important;
font-family: "Univers Next Pro" !important;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 140%; 
letter-spacing: 0.32px;
  }

    .account--login .fade-toggle .form__legal .text-link {
  --link:  #1240FC !important;
  
    }

/* --------------------------------------------------
  CUSTOMER ACCOUNTS | ORDER HISTORY
-------------------------------------------------- */
/* Target ONLY the account tables */
#MainContent section.account table {
  border-collapse: separate !important;   /* override theme */
  border-spacing: 0;
  border-radius: 16px;                    /* base radius */
  overflow: hidden;                       /* clip inner corners */
  
}


@media only screen and (max-width: 479px) {
 .account table .payment-status, .account table .total {
    display: table-cell !important;   /* force visible on mobile */
  }
}

/* Top corners – header row */
#MainContent section.account thead tr:first-child th:first-child {
  border-top-left-radius: 16px;
}

#MainContent section.account thead tr:first-child th:last-child {
  border-top-right-radius: 16px;

}

#MainContent section.account thead tr th {
    text-align: left !important;
    color: var(--Off-White, #FAF1E7);

/* Cinema Puzzles/Button/Button 2 */
font-family: "Roc Grotesk" !important;
font-size: 16px;
font-style: normal;
font-weight: 750;
line-height: 100%; /* 16px */
text-transform: uppercase;
}

/* Bottom corners – last body row */
#MainContent section.account tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
 
}

#MainContent section.account tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
  
}

#MainContent section.account tbody * {
  border-width: 0px !important;
}

#MainContent section.account table {
  border: 1px solid var(--Off-White, #FAF1E7) !important;
}


/* --------------------------------------------------
  CUSTOMER ACCOUNTS | SUBSCRIPTIONS | subscription--main - CSS selector
-------------------------------------------------- */

.wishlisthero-floating {
  z-index: 1 !important;
}

.MuiCardHeader-root, .MuiCardHeader-content, .MuiCardHeader-title a  {
  border: none !important;
  border-width: 0px !important;
  border-bottom-width: 0px !important;
  padding: 0px !important;
}

.MuiPaper-root {
  background-color: transparent !important;
  box-shadow: none !important;
}
 .wishlist-hero-list-card-header-added-on , .wishlist-hero-page-actions-bar {
  display: none !important;
}

/* --------------------------------------------------
  CUSTOMER ACCOUNTS | CART
-------------------------------------------------- */
.cart__empty__product.product__upsell--stacked.is-animated {
  display: none !important;
}



/* Breadcrumbs – Cinema Puzzles */
.cp-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;              /* space between items & separators */
  font-family: "Univers Next Pro" !important, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(250, 241, 231, 0.7);
  margin-bottom: 10px !important;
}

/* If you're using the <ol><li> version, remove default list styling */
.cp-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

.cp-breadcrumbs__link {
  color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Button/Link 2 */
font-family: "Univers Next Pro" !important;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 18px */
letter-spacing: 0.45px;
  text-decoration: none;
}

.cp-breadcrumbs__link:hover {
  color: rgba(250, 241, 231, 1);
  text-decoration: underline;
}

.cp-breadcrumbs__item--current {
  color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Button/Link 2 */
font-family: "Univers Next Pro" !important;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 18px */
  text-decoration: none;
  letter-spacing: 0.45px;
}

.cp-breadcrumbs__separator {
  display: inline-flex;
  align-items: center;
    font-size: 24px;      /* bigger symbol */
  line-height: 1;
   margin: 0px 10px;
  color: var(--Off-White, #FAF1E7);
}


/* ----------------------------------------------------------
   Cart item row: spacing, border, layout
---------------------------------------------------------- */

.cart__item {
  display: flex;
  align-items: flex-start;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  border-top: var(--stroke-weight-1, 1px) solid var(--Off-White, #FAF1E7);
  overflow: visible;
}

/* wrapper around all items */
.cart__items {
  border-bottom: 1px solid var(--Off-White, #FAF1E7);
}

/* right-hand content column (everything except image) */
.cart__item__content {
  flex: 1 1 50% !important;
  min-width: 0;
  
  overflow: visible;
}


.cart__item__content-inner {
  width: 100% !important;
  max-width: 100% !important;
}





.cart__item__content__left {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* ----------------------------------------------------------
   Image column (left)
---------------------------------------------------------- */

.cart__item__image a {
  flex: 0 0 200px !important;       /* fixed column width */
  width: 200px !important;
  max-width: 200px !important;
  
  min-height: 200px !important;
  order: 0;                     /* ensure it stays on the left */
}
.cart__item__image {
margin: 0px !important;
}


/* ----------------------------------------------------------
   Headings / typography
---------------------------------------------------------- */

.cart__title {
  color: var(--Off-White, #FAF1E7);
  font-family: "Awesome Serif VAR";
  font-size: 40px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
}

.cart__items-count-row {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 16px;

  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

.cart__items-count-label {
  text-transform: none;
}

.cart__item__title {
  color: var(--Off-White, #FAF1E7);
  font-family: "Awesome Serif VAR";
  font-size: 32px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
}

.cart__item__remove {
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
  text-transform: capitalize;
}

/* per-item price text used in the PRICE row */
.cart__price {
  color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Roc Grotesk" !important;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 110%;
  text-transform: uppercase;
}

/* line total on the right column (if used) */
.cart__item__price {
  color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Roc Grotesk" !important;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 110%;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   Free shipping, widgets, totals
---------------------------------------------------------- */

.free-shipping__default-message {
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro" !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

.cart__widget__title {
  color: var(--Off-White, #FAF1E7);
  font-family: "Roc Grotesk" !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 750;
  line-height: 100%;
  text-transform: uppercase;
  padding-top: 0px;
  border-top: none !important;
}

.cart__widget__content__inner label {
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro" !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 140%;
  letter-spacing: 0.32px;
}

.cart__total {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--Off-White, #FAF1E7);
}

.cart__total__price {
  color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Roc Grotesk" !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 150%;
  text-transform: uppercase;
}

.cart__total__label {
  color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Roc Grotesk" !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 110%;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   Continue shopping button row
---------------------------------------------------------- */

.cart__button-continue {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
  width: 100%;
}

.cart__button-continue .btn {
  width: auto;
}

/* ----------------------------------------------------------
   Quantity pill (+ / − / count) + Remove
---------------------------------------------------------- */

/* Wrapper: stacks pill + Remove */
.cart__quantity-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  padding: 0;
  min-width: 0;
}

/* Actual pill: contains − / count / + */
.cart__quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 16px;
  border: 2px solid var(--Off-White, #FAF1E7);
  min-height: 48px;
  padding: 0 8px;
  min-width: 111px;
}

.cart__quantity-field {
  color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 750;
  line-height: 100%;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   Cart-line layout: info + qty on row 1, PRICE row 2
---------------------------------------------------------- */

.cart-line__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto; /* left: info | right: qty */
  grid-template-rows: auto auto;
  grid-template-areas:
    "info qty"
    "price price";
  column-gap: 1rem;
  align-items: center;
  width: 100%;
}

.cart-line__info {
  grid-area: info;
  min-width: 0;
  max-width: 60%
}

.cart-line__quantity {
  grid-area: qty;
  justify-self: flex-end;
  min-width: 100px;
  width: 100%
  
}

.cart-line__price {
  grid-area: price;
  display: grid;
  grid-template-columns: auto auto; /* label | amount */
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 30px;
      color: var(--Off-White, #FAF1E7);
  text-align: center;
  font-family: "Roc Grotesk" !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: 110%;
  text-transform: uppercase;
}

.cart__price  {
    align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 0px !important;
}
.cart__item__content-inner .product-piece-count {
  margin-top: 10px;
}

.cart__inner * {
  --border: none !important;
}


/* Hard override to make the row behave */
.cart__items .cart__item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
}

.cart__items .cart__item__image {
  float: none !important;
  position: static !important;
  width: 200px;
  max-width: 200px;
  margin-right: 32px;
}

.cart__items .cart__item__content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible !important;
}


/* 1. Let the content column stretch full height of the cart row */
.cart__item {
  align-items: stretch;          /* instead of flex-start */
}

.cart__item__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.cart__item__content__left {
  flex: 1 1 auto;
  height: 100%;
}

/* 2. Make the grid fill that height and stretch its rows */
.cart-line__main {
  height: 100%;                  /* grid as tall as the column */
  display: grid;
  grid-template-rows: 1fr 1fr;   /* red row, yellow row share full height */
  align-items: stretch;
}

/* Ensure the two grid areas actually stretch */
.cart-line__info,
.cart-line__price {
  align-self: stretch;
}


/* --------------------------------------------------
  CART ASIDE STYLING
-------------------------------------------------- */

.cart__aside-title  {
  color: var(--Off-White, #FAF1E7);
  font-family: "Awesome Serif VAR";
  font-size: 40px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
  border-bottom: none !important;
  margin-top: 0px !important;
}



.free-shipping {
  border-top: none !important;
  border-top-color: transparent !important;
    color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro"!important;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

.free-shipping__success-message {
  color: var(--Off-White, #FAF1E7);
  font-family: "Univers Next Pro" !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* ================================
   CART PAGE – UPDATE CART button
   ================================ */

body.template-cart button[name="update"].cart__checkout {
width: 250px !important;
  height: 47.565px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  background-image: url("/cdn/shop/files/btn-secondary-lg_430x.png?v=1764157193") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;

  background-color: transparent !important;
  border: none !important;

color: var(--Blockbuster-200-primary, #4F71FD);
text-align: center;
font-family: "Roc Grotesk" !important;
font-size: 18px;
font-style: normal;
font-weight: 750;
line-height: 100%; /* 18px */
text-transform: uppercase;

  padding: 0 !important;
  line-height: 1 !important;

  position: relative !important;
}


/* kill any theme overlay/pseudo on UPDATE button */
body.template-cart button[name="update"].cart__checkout::before,
body.template-cart button[name="update"].cart__checkout::after {
  content: none !important;
}

/* ================================
   CART PAGE – UPDATE CART :hover
   ================================ */

body.template-cart button[name="update"].cart__checkout:hover {
  /* your cinema-blue hover image */
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
 color: var(--Popcorn-200-primary, #FEDA52) !important;
  filter: brightness(0.93) !important;
  transform: translateY(-1px) !important;
  background-image: url("/cdn/shop/files/btn-secondary-lg_430x.png?v=1764157193") !important;
}


/* ================================
   CART PAGE – CHECKOUT button
   ================================ */

body.template-cart button[name="checkout"].cart__checkout {

  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 56px !important;

  padding: 0 56px 0 24px !important; /* room for cart icon */

  background: transparent !important;
  background-image: url("/cdn/shop/files/Subscribe_button_container_430x.png?v=1763390332") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  border: none !important;
  box-shadow: none !important;

  color: #FAF1E7 !important;

  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;

  overflow: visible !important;
}


/* hide the built-in LEFT icon on the checkout button */
body.template-cart button[name="checkout"].cart__checkout svg,
body.template-cart button[name="checkout"].cart__checkout .icon-lock {
  display: none !important;
}

/* kill any theme pseudo-element on checkout */

body.template-cart button[name="checkout"].cart__checkout::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 20% !important;      /* keep on RIGHT */
  left: auto !important;

  width: 22px !important;
  height: 22px !important;
  aspect-ratio: 1 / 1;
  display: block !important;

  background-image: url("/cdn/shop/files/cart-2_430x.svg?v=1767611952") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  transform: translateY(-50%) !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none;
}
/* prevent hover animations from moving the icon */
body.template-cart button[name="checkout"].cart__checkout:hover::after {
  transform: translateY(-50%) !important;
}
.cart__note {
  display: none;
}

.cart__foot__inner {
  margin-top:15px;
  border-top: 1px solid var(--Off-White, #FAF1E7);
}


/* ================================
   CART PAGE – CHECKOUT button hover
   ================================ */
body.template-cart button[name="checkout"].cart__checkout:hover {
  background: #333; /* darker hover */
  transform: translateY(-1px);
}


/* --------------------------------------------------
  CHECKOUT PAGE
-------------------------------------------------- */



/* --------------------------------------------------
  DIRECTORS CUT PAGE
-------------------------------------------------- */

/* ======================================================
   PAGE + SECTION SPECIFIC HERO FIX
   Safe: affects ONE section only
====================================================== */

/* ===== ONLY this section ===== */
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.brick_block_image_frame{
  /* force the whole block to become a single-column stack */
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  row-gap: 24px !important;
  justify-items: center !important;
  align-items: center !important;
}

/* make BOTH children occupy the full row */
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.brick_block_image_frame > *{
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* center the text block and keep it above */
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.hero_content_wrapper{
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
}

/* center the image block and stop “backfill” absolute positioning from escaping */
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.image__hero_pane{
  justify-self: center !important;
  align-self: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* neutralise the backfill behavior inside THIS section */
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.image__hero_scale,
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.image__wrapper,
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.image-wrapper{
  position: static !important;
}

/* contain the actual image */
#BrickSection-template--16439634144277__section_custom_content_WBJPB8
.image__hero_scale img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}








/* Directors commentary text block (this section only) */
/* DIRECTOR'S COMMENTARY — target ONLY this section */
#shopify-section-template--16439643144277__section_double_3cZCyx p[data-aos-order="4"]{
  color: var(--Off-White, #FAF1E7) !important;
  text-align: center !important;
  font-family: "Roc Grotesk" !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 100% !important;
  text-transform: uppercase !important;
}

#shopify-section-template--16439643144277__section_double_3cZCyx div[data-aos-order="5"] > p{
  color: var(--Off-White, #FAF1E7) !important;
  text-align: center !important;
  font-family: "Univers Next Pro" !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 140% !important;
  letter-spacing: 0.32px !important;
}

@media (max-width:749px ) {
  #shopify-section-template--17466174013525__section_rich_text_columns_gfeYw8 .hero__title, #shopify-section-template--17466174013525__section_rich_text_columns_xT3exk .hero__title {
    justify-self:center !important;
  }
}



/* --------------------------------------------------
   SUBSCRIPTION AND GIFTS - GENERAL STYLING
-------------------------------------------------- */
/* Center the rich-text-column icons on the Subscription & Gifts page only */
#subscription-and-gifts .hero__icon {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

#subscription-and-gifts .rte-columns__icon-wrapper {
  margin: 0 auto;
}

/* Subscription & Gifts page – right-column step heading */
#subscription-and-gifts .index-rte-columns
.rich-text-columns__right h2.hero__title {
  color: var(--Off-White, #FAF1E7) !important;
  text-align: center !important;
  font-family: "Roc Grotesk", sans-serif !important;
  font-size: 32px;
  font-style: normal;
  font-weight: 750;
  line-height: 90%;
  text-transform: uppercase;
}
/* SUBSCRIPTION PAGE – two-column subscription block */
#subscription-and-gifts .rte-two-col__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;   /* prevent wrapping on wider screens */
  gap: 24px;
  padding-bottom: 40px;
}

#subscription-and-gifts .rte-two-col__col {
  flex: 1 1 0 !important;         /* each column shares the row */
  min-width: 0;
}

/* On mobile: stack the columns */
@media (max-width: 749px) {
  #subscription-and-gifts .rte-two-col__inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    padding-bottom: 30px;
  }

  #subscription-and-gifts .rte-two-col__col {
    flex: 0 0 100% !important;
  }
}

#subscription-and-gifts .rte-two-col__inner p {
  color: var(--Off-White, #FAF1E7);
text-align: center;

/* Cinema Puzzles/Body/Body 2 */
font-family: "Univers Next Pro";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
letter-spacing: 0.4px;
}

#subscription-and-gifts .rte-two-col__inner h3 {
color: var(--Off-White, #FAF1E7);
text-align: center;
font-family: "Roc Grotesk" !important;
font-size: 20px;
font-style: normal;
font-weight: 750;
line-height: 90%; /* 18px */
text-transform: uppercase;
}

#subscription-and-gifts .rte-two-col__inner h4 {
  color: var(--Off-White, #FAF1E7);
  text-align: center;

/* Cinema Puzzles/Body/Body 2 */
font-family: "Univers Next Pro" !important;
font-size: 20px;
font-style: normal;
font-weight: 700 !important;
line-height: 140%;
letter-spacing: 0.4px;
}

/* 40/60 split for two-column blocks in this specific section (desktop only) */
@media (min-width: 750px) {
  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rte-two-col__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8
  .rte-two-col__col--left {
    flex: 0 0 40% !important;
    min-width: 0;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8
  .rte-two-col__col--right {
    flex: 0 0 60% !important;
    min-width: 0;
  }
}
/* Stack hero buttons vertically in this rich-text section */
#subscription-and-gifts .hero__button-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;       /* center the buttons */
  gap: 12px;                 /* space between buttons */
  max-width: 260px;          /* optional: keeps the group narrow */
  margin: 0 auto;            /* center the whole group */
  padding-top: 40px;
  padding-bottom: 100px;
}

/* Subscription & Gifts – make the rich-text image full-width and responsive */
#subscription-and-gifts .hero__image {
  width: 100% !important;
  max-width: 100% !important;
}

/* override inline max-width on the wrapper and let it span the column */
#subscription-and-gifts .rte-columns__image-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

/* make the actual image fill the wrapper and shrink with screen size */
#subscription-and-gifts .rte-columns__image {
  display: block;
  width: 100% !important;
  height: auto;
}

#subscription-and-gifts .hero__rte p {
  padding-bottom:50px;
}

/* --------------------------------------------------
   ACCOUNTS PAGES - GENERAL STYLING
-------------------------------------------------- */

[id^="AddressNewForm"] .form-field label,
#AddressNewForm .form-field label {
display:none !important;
}


[id^="EditAddress_"] .form-field label,
#AddAddress .form-field label {
display:none !important;
}


/* EDIT + ADD ADDRESS forms – inputs, selects, textareas */
[id^="EditAddress_"] .form-field input,
[id^="EditAddress_"] .form-field select,
[id^="EditAddress_"] .form-field textarea,
#AddAddress .form-field input,
#AddAddress .form-field select,
#AddAddress .form-field textarea {
    background:transparent;
  border: 1px solid var(--Off-White, #FAF1E7);
  border-radius: 16px !important;
  padding: 10px 12px;
  color: #faf1e7;
  font-family: "Roc Grotesk", sans-serif;
  font-size: 14px;
}

[id^="AddressNewForm"] .form-field input,
[id^="AddressNewForm"] .form-field select,
[id^="AddressNewForm"] .form-field textarea,
#AddressNewForm .form-field input,
#AddressNewForm .form-field select,
#AddressNewForm .form-field textarea {
    background:transparent;
  border: 1px solid var(--Off-White, #FAF1E7);
  border-radius: 16px !important;
  padding: 10px 12px;
  color: #faf1e7;
  font-family: "Roc Grotesk", sans-serif;
  font-size: 14px;
}
/* Closed select field – dark background */
[id^="AddressNewForm"] .form-field select,
#AddressNewForm .form-field select {
  background-color:#1E1E1E ;       /* dark background */
  border: 1px solid var(--Off-White, #FAF1E7);
  border-radius: 16px !important;
  padding: 13px 12px;
  color: #faf1e7;
  font-family: "Roc Grotesk", sans-serif;
  font-size: 14px;
}


/* -------------------------------------------------- 
   1. GLOBAL MOBILE RESPONSIVENESS (HERO)
-------------------------------------------------- */
@media (max-width: 1100px) { 
  .hero__title {
    font-size: 40px !important;
    max-width: 400px;
    align-self: center !important;
  }

  .hero__description {
    font-size: 18px !important;
    max-width: 400px;
    align-self: center !important;
  }
}


/* -------------------------------------------------- 
   2. HAMBURGER + DROPDOWN BASE (DESKTOP DEFAULTS)
-------------------------------------------------- */

/* Hidden by default on desktop */
.cch-hamburger {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Mobile menu hidden by default */
.cch-mobile-menu {
  display: none;
}

/* Show dropdown when JS toggles .is-open */
.cch-mobile-menu.is-open {
  display: block;
}


/* -------------------------------------------------- 
   3. MOBILE HEADER + DROPDOWN (≤ 800PX)
-------------------------------------------------- */
/* -----------------------------------------
   MOBILE HEADER + DROPDOWN (<= 800px)
------------------------------------------ */
@media (max-width: 800px) {




#shopify-section-template--16439642783829__hero .collection-image-with-title {
    padding-left: 20px !important;
}

#Product--template--17466174570581__main .product__page {
grid-template-columns: 1fr;
}
#Product--template--17466174570581__main .product__images {
  padding-right: 0px !important;
  padding-bottom: 20px;
}

#Product--template--17466174570581__main .product__wrapper__inner {
padding-left: 20px;
padding-right: 20px;
}

#Product--template--17466174570581__main .product__title {
  font-size: 30px;
  padding: 10px;
}
#Product--template--17466174570581__main .product__price > *   {
  font-size: 20px !important;
  padding: 10px;
}

#Product--template--17466174570581__main .product-piece-count {
  font-size: 16px !important;
}

#Product--template--17466174570581__main .product__description__content .rte {
   font-size: 16px !important;
}



/* Force related/recommended products grid to 1 column (overrides inline vars) */
  


  /* Make custom header a full-width bar above content */
  .header-sections .cinema-custom-header {
    position: relative;
    z-index: 50;                  /* lift header (and dropdown) above hero */
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin: 0;
    padding: 16px 20px;
    box-sizing: border-box;
  }

  .theme__header .section-padding {
    padding: 10px 20px !important;
  }

  #SectionColumns--sections--16439635312725__section_text_row_eRtQ6p  {
        justify-content: center !important;
    justify-self: center !important;
    justify-items: center !important;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }

   #SectionColumns--sections--16439635312725__section_text_row_eRtQ6p .wrapper  {
        justify-content: center !important;
    justify-self: center !important;
    justify-items: center !important;
    max-width: 60%;
    min-width: 60%;
    width: 60%;
  }

  /* Hide marquee + ONLY the main subscribe button in the header row */
  .cinema-custom-header .cch-marquee,
  .cinema-custom-header > .cch-subscribe {  /* note the '>' (direct child) */
    display: none !important;
  }

  /* Show hamburger on mobile */
  .cinema-custom-header .cch-hamburger {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .cinema-custom-header .cch-hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    margin: 4px 0;
    border-radius: 999px;
    background: currentColor;
  }

  /* Slightly smaller logo on mobile */
  .header-sections .cinema-custom-header > a.cch-logo-link img {
    height: 32px;
    width: auto;
  }

  /* DROPDOWN PANEL directly under the header */
  .cch-mobile-menu {
    display: none;                /* hidden by default */
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;                    /* directly below header bar */
    z-index: 1000;               /* above anything below the header */
    background: #07040C;
    padding: 12px 20px 16px;
    box-sizing: border-box;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(250,241,231,0.15);
  }

  .cch-mobile-menu.is-open {
    display: block;
  }

  .cch-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cch-mobile-link {
    display: block;
    padding: 8px 0;
    text-decoration: none;
  }

  /* Mobile subscribe inside dropdown */
  .cch-subscribe--mobile {
    display: inline-flex;        /* make sure it’s visible, not hidden */
    align-items: center;
    justify-content: center;
    margin-top: 12px;

    width: 100%;
    max-width: 260px;
    height: 44px;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
  }

  .hero__rte {
    font-size: 16px !important;
    max-width: 90% !important;
    align-self: center !important;
  }

  .cinema-feature p {
       font-size: 16px !important;
    max-width: 60% !important;
    align-self: center !important;
  }
    .cinema-feature h6 {
       font-size: 20px !important;
   
    justify-self: center !important;
     justify-self: center !important;
  align-self: center !important;
  justify-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  }

  .hero__content  h3 {
       max-width: 100% !important;
    justify-self: center !important;
  }
  .arch-center h2 {
    font-size: 48px;
    max-width: 100% !important;
    justify-self: center !important;
  }
 .arch-center p {
       font-size: 16px !important;
    max-width: 90% !important;
     justify-self: center !important;
  }

 /* 1. Make the images "contained" instead of cropped */
.section-columns .image-wrapper img.fit-cover {
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* override Broadcast "cover" */
  object-position: center center;
}

/* 2. Center all of the column contents (image + text) */
.section-columns .column_inner,
.section-columns .column__inner {
max-width: 100% !important;
width: 100% !important;
  justify-content: center !important;   /* vertical center */
  align-items: center !important;       /* horizontal center */
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
}
.column__content.frame__item {
  display: block !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
  padding: 0px !important;
}
 #SectionColumns--template--16439643078741__section_multicolumn_nMKCpp .image-wrapper {
 padding-top: calc(1 / var(--aspect-ratio) * 50%);
}

#SectionColumns--template--16439643078741__section_multicolumn_itxQqf .image-wrapper {
 padding-top: calc(1 / var(--aspect-ratio) * 50%);
}

.section-columns .column__inner .btn span {
  font-size:20px !important;
}
#SectionColumns--sections--16439635312725__section_text_row_eRtQ6p {
  max-width: 200px !important;
  --COLUMNS-MOBILE: 4 !important;
  justify-self: center !important;
}

#SectionColumns--sections--16439635312725__section_text_row_eRtQ6p img {
  max-width: 40px !important;
}

#shopify-section-sections--16439635214421__footer .footer__blocks  {
display: block !important;
   --desktop-width: hidden !important;
   padding: 0px !important;
   margin-right: 0px !important;
}

#shopify-section-sections--16439635214421__footer .footer__block {
display: block !important;
   --desktop-width: hidden !important;
   padding: 0px !important;
   margin-right: 0px !important;
}

#shopify-section-sections--16439635214421__footer .footer__block .footer__block--text {
   margin-right: 0px !important;
   --desktop-width: 100% !important;
}
.supporting-menu {
  border-top: 0px !important;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;
}
.collection__title  {
  padding: 0px !important;
  max-width: 90%;
  justify-self: center !important;
  align-self: center !important;
}

.collection__title .hero__description  {
width: 100% !important;
    font-size: 16px !important;
    max-width: 100% !important;
   justify-self: center !important;
  }
  .collection__title {
    padding-top: 30px !important;
    padding-bottom: 40px !important;
  }

  .collection__products .grid{
    padding: 0px !important;
     grid-template-columns: 1fr !important;
     justify-content: center !important;

  }

  .collection__products {
     padding: 0px !important;
  }
  .product-piece-count {
    font-size: 12.5px !important;
  }
  .product-item__title {
     font-size: 28px !important;
  }

  .rich-text-columns__wrapper  {
padding: 0px !important;
max-width:90% !important;
justify-content: center !important;
  }

  .hero__rte {
    justify-self: center !important;
  }

  .brick__section {
    padding: 0px !important;

justify-content: center !important;
  }



#BrickSection--template--17018078101589__section_double_3CzCYx  {
    display: flex;          /* in case it isn't already */
    flex-direction: column; /* stack vertically */
    align-items: stretch;   /* each column full width */
    max-width: 100vw !important;
  }

  #BrickSection--template--17018078101589__section_double_3CzCYx .brick__section > * {
    width: 100%;            /* make each child span full width */
  }

.index-hero {
      display: flex;          /* in case it isn't already */
    flex-direction: column; /* stack vertically */
    align-items: stretch;   /* each column full width */
    max-width: 100vw !important;
}


.cinema-contact-success__title {
  font-size: 32px !important;
}
.cinema-contact-success__text {
  font-size: 16px !important;
  line-height: 140% !important;
  max-width: 80% !important;
}

.cinema-contact-success__button {
  max-width: 70% !important;
}

 .hero__title.heading-large {
    font-size: 32px !important;
  }
.stacked-hero__inner {
  padding: 0px !important;
max-width:90% !important;
justify-content: center !important;
}

.stacked-hero__heading{
  font-size: 32px !important;
}
  #SectionColumns--template--16439643177045__section_multicolumn_fnj6fk .wrapper--full-padded {
    padding: 0px !important;
    max-width: 90%;
    justify-self: center !important;

  }
  .column__heading.heading-medium  {
font-size: 32px !important;
justify-self: center !important;
max-width: 17ch;
}

.column__text.rte.body-medium p {
      font-size: 16px !important;
}

#SectionColumns--template--16439643177045__section_multicolumn_fnj6fk .icon__animated {
  height: 60px !important;
  width: 60px !important;
  max-width: 60px !important;
  padding-bottom: 10px;
  margin-top: 40px;
}

#SectionColumns--template--16439643177045__section_multicolumn_fnj6fk .column__heading.heading-small {
max-width: 10ch !important;
justify-self: center !important;
}

#SectionColumns--template--16439643177045__section_multicolumn_fnj6fk
  .grid.multicolumn .grid-item:nth-child(2) {
  display: none !important;
}

   #shopify-section-template--17018568245333__section_rich_text_columns_gfeYw8
  .rich-text-columns__left .rte-columns-block:nth-of-type(3) {
    display: none !important;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8
  .rich-text-columns__left .rte-columns-block:nth-of-type(2) {
    display: none !important;
  }
#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right .hero__title {
line-height: 90% !important; /* 18px */
font-size: 20px !important;
max-width: 90%;
justify-self: center !important;
}

#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right h3 {
line-height: 90% !important; /* 18px */
font-size: 18px !important;
max-width: 90%;
justify-self: center !important;
}
#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right h4 {
line-height: 90% !important; /* 18px */
font-size: 18px !important;
max-width: 90%;
justify-self: center !important;
}

#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right p {
font-size: 16px !important;
max-width: 80% !important;
justify-self: center !important;

}

#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .hero__button-group {
justify-content:center !important;
padding: 0px !important;
margin: 0px !important;
width: 100% !important;
max-width: 100% !important;

}
#shopify-section-template--17018568245333__section_double_3CzCYx .brick__section {
    border-top: 0px !important;
    border-bottom: 0px !important;
}

#BrickSection--template--17018568245333__section_double_3CzCYx .hero__rte {
  margin-bottom:0px !important;
}

#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8  .rich-text-columns__right .rte-columns-block:nth-of-type(5) {
padding-top: 80px;
border-top: 1px solid #FAF1E7;
border-top-width: 100%;
margin-top: 50px;

}

#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8  .rich-text-columns__right .rte-columns-block:nth-of-type(8) {
padding-top: 80px;
border-top: 1px solid #FAF1E7;
border-top-width: 100%;
margin-top: 50px;

}

#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8  .rich-text-columns__right .rte-columns-block:nth-of-type(11) {
padding-top: 80px;
border-top: 1px solid #FAF1E7;
border-top-width: 100%;
margin-top: 50px;

}
#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .wrapper--full-padded {
  width: 100% !important;
  max-width: 100% !important;
  margin:0px !important;
  justify-self: center !important;
}

#RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .hero__title {
  max-width: 90% !important;
  width: 90% !important;
  justify-self: center !important;
}

#subscription-and-gifts #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .hero__rte p {
     padding-bottom: 10px; 
}

#BrickSection--template--17018568245333__section_double_3CzCYx .brick__block__image {
  display: none !important;
}

#Rte--template--16439642751061__section_rich_text_kjPkmk .hero__title h2 {
  align-self: left !important;
  font-size: 32px !important;
}

.cart__items .cart__item {
  flex-direction: column !important;
   padding: 0px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.cart__item__image a {
       
  width: 100vw !important;
  max-width: 100vw !important;
  
  min-height: 375px !important;
  order: 0;                     /* ensure it stays on the left */
}
.cart__item__image {
margin: 0px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  
  min-height: 375px !important;
}

.cart {
  padding: 0px !important;
}

.cart__title {
  padding-left: 20px !important;
}

.cart__items-count-row {
  display: none !important;
}

.cart__item__content {
  padding: 0px;
  justify-content: center !important;
  width: 100vw !important;
}

.cart-line__info {
  width: 100%;
  max-width: 100%;
  text-align: center !important;

}

.cart__item__title {
  font-size:28px !important;
  padding-top: 20px;
  width: 100vw !important;
  padding-bottom: 20px;
}

.cart-line__quantity .cart__quantity-wrapper {
 width: 100% !important;
 max-width: 100vw !important;
}

.cart__item__remove {
  padding-top: 10px;
  padding-bottom: 30px;
}

.cart__items .cart__quantity {
  width: 160px !important;
}


 .cart-line__main {
    display: grid;
    grid-template-columns: 1fr 1fr;        /* 50% / 50% */
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "info price"   /* title row (info col) and price col */
      "info price"   /* piece-count + meta vs price */
      "qty  qty";    /* quantity full width */
    column-gap: 1rem;
    row-gap: 0.75rem;
  }

  .cart-line__info {
    grid-area: info;
    max-width: 100%;
  }

  .cart-line__price {
    grid-area: price;
    /* nudge down so it visually lines up closer to piece count than title */
    align-self: flex-end;
    margin-top: 0.75rem;
    width: 100%;
  }

  .cart-line__quantity {
    grid-area: qty;
    justify-self: flex-start;
    padding-right: 0;
  }

  /* Make piece count breathe a bit under the title */
  .cart__item__content-inner .product-piece-count {
    margin-top: 0.4rem;
    display: block;
    text-align: left !important;
    padding-left: 30px !important;
  }

  /* Optional: left-align price text for nicer pairing with piece count */
  .cart__price {
    text-align: right;
    font-size: 22px;
  }

  .cart__quantity-counter {
    max-width: 100%;
    margin-top: 30px !important;
  }

 .cart-line__price {
    grid-template-columns: 1fr;      /* single column now that label is hidden */
    justify-content: flex-end;       /* push content to the right */
    justify-items: end;              /* grid children align to the right */
  }


.cart-line__price-label {
  display: none !important;
}
  .cart__price
   {
    text-align: right !important;
    padding-right: 30px !important;
  }

  .cart__item {
    border: none !important;
  }

  .cart__items {
    border-bottom: none !important;
  }
.cart__button-continue {
  justify-content: center !important;
}

.cart__aside {
  max-width: 90% !important;
  justify-self: center !important;
}
.cart__widget__title svg {
  width: 30px !important;
  height: 30px !important;
}
.cart__widget__title {
  align-items: center !important;
  padding-bottom: 0px !important;
}

.cart__button-continue .cinema-blue-btn{
  width: 90% !important;
  margin-bottom: 30px;
}

#privacy-policy [id^="shopify-section-template--17466174242901__section_custom_content"] .hero__title {
  text-align: center !important;
  font-size: 18px !important;
}

#frequently-asked-questions [id^="shopify-section-template--17872674881621__section_custom_content"] .hero__title {
  text-align: center !important;
  font-size: 18px !important;
}

#privacy-policy [id^="shopify-section-template--16798856249429__section_custom_content"] .hero__rte p {
  text-align: center !important;
  font-size: 16px !important;
}


a[href="mailto:privacy@cinemapuzzles.com"][title="mailto:privacy@cinemapuzzles.com"] {
  font-size: 14px !important;
}

#terms-amp-conditions [id^="shopify-section-template--17466174406741__section_custom_content"] .hero__title {
  text-align: center !important;
  font-size: 18px !important;
}

#terms-amp-conditions [id^="shopify-section-template--16774557499477__section_custom_content"] .hero__rte p {
  text-align: center !important;
  font-size: 16px !important;
}
a[href="mailto:support@cinemapuzzles.com"][title="mailto:support@cinemapuzzles.com"]

 {font-size: 14px !important;}

#shipping-amp-returns-policy [id^="shopify-section-template--17466174275669__section_custom_content"] .hero__title {
  text-align: center !important;
  font-size: 18px !important;
}

#shipping-amp-returns-policy [id^="shopify-section-template--16798934204501__section_custom_content"] .hero__rte p {
  text-align: center !important;
  font-size: 16px !important;
}

#shipping-amp-returns-policy #BrickSection--template--17466174275669__section_custom_content_bCpmdr .hero__button {
  align-self: center !important;
  margin-bottom: 30px !important;
}

#shopify-section-template--16798934204501__section_rich_text_C6jEyn .hero__title {
    text-align: center !important;
  font-size: 24px !important;
  max-width: 90% !important;
  justify-self: center !important;
}

/* Target THIS section’s ordered list */
#shopify-section-template--16798934204501__section_custom_content_bCpmdr .hero__rte ol {
  margin: 0 !important;
  padding: 0 !important;
  list-style-position: inside;   /* numbers align close to text */
}

/* Reset paragraph margins inside list items so all items behave the same */
#shopify-section-template--16798934204501__section_custom_content_bCpmdr .hero__rte ol li,
#shopify-section-template--16798934204501__section_custom_content_bCpmdr .hero__rte ol li p {
  margin: 0 !important;
}

/* Center the whole list block in its column */
#shopify-section-template--16798934204501__section_custom_content_bCpmdr .brick__block__text .hero__content .hero__rte {
  text-align: center !important;
}

/* If you want each line of list text itself centered under its number: */
#shopify-section-template--16798934204501__section_custom_content_bCpmdr .hero__rte ol li {
  text-align: center !important;
}

#BrickSection--template--16798934204501__section_custom_content_bCpmdr .hero__button {
  justify-content: center !important;
  margin-bottom: 30px;
}

#shopify-section-template--16439642652757__section_hero_WKmUa3 .hero__images .image__fill img {
  object-fit: cover !important;
}
#shopify-section-template--16439642652757__section_hero_WKmUa3 .hero__wrapper {
  padding: 0px !important;
}

#shopify-section-template--16439642652757__section_hero_WKmUa3 .hero__title {
  font-size: 34px !important; 
}
#Hero--template--16439642652757__section_hero_WKmUa3  .body-large p {
  font-size: 22px !important; 
  max-width: 80% !important;
  justify-self: center !important;
}

#Hero--template--16439642652757__section_hero_WKmUa3  .body-medium p {
  font-size: 16px !important; 
  line-height: 140% !important;
    max-width: 80% !important;
  justify-self: center !important;
}

#Divider--template--16439642652757__section_divider_hiBW8X {
  display: none !important;
}

.account--login {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    max-height: 100% !important;
    min-height: 100% !important;  
    height: 100% !important;
  }

.account--login .wrapper {
    position: relative;
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw);

   max-height: 100% !important;
    min-height: 100% !important;   
    height: 100% !important;     
    padding: 0px !important;           
    background-size: cover !important;      
    background-repeat: no-repeat;
    background-position: center bottom;
    overflow: hidden !important;
  }

  .account--login .wrapper.wrapper--narrow {
    height:100% !important;
    max-height: 100% !important;
    min-height: 100% !important;         
  }

 .account--login .fade-toggle {
  max-width: 80%;
  justify-self: center !important;
  margin-top: 80px;
  margin-bottom:80px;

 }

 .account--login .login.fade-toggle.is-hidden {
  margin-top:30px !important;
   margin-bottom:30px !important;
 }

  .account--login .fade-toggle .page__heading {
 font-size: 34px !important;
 margin-top: 0px !important;
 }

  .account--login .fade-toggle.form-message {
      font-size: 16px !important;
  margin-bottom: 0px !important;
  }

  .account--login .fade-toggle .form__legal p {
    text-align: center !important;
    font-size: 14px !important;
  }

.login .page__heading {
  font-size: 34px !important;
  
}
.account--login .login > p {
  font-size: 16px !important;
  margin-bottom: 0px !important;
  
}

.account--login .form-field input[type="email"],
.account--login .form-field input[type="password"] {
  font-size: 16px !important;
}

.account--login .form-field input::placeholder {
  font-size: 16px !important;
}
.register-heading {
 font-size: 34px !important;
}

.register-sub {
  font-size: 16px !important;
  margin-bottom: 0px !important;
}
.register-content input[type="text"],
.register-content input[type="email"],
.register-content input[type="password"] {
 font-size: 16px !important;
}
.register-content input::placeholder {
font-size: 16px !important;
}
.register-content.register-fields-active
input[type="text"],
.register-content.register-fields-active
input[type="email"],
.register-content.register-fields-active
input[type="password"] {
font-size: 16px !important;
}
.register-bg {
     position: relative;
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw);

    min-height: 100vh;          
    padding: 0px !important;           
    background-size: cover !important;      
    background-repeat: no-repeat;
    background-position: center bottom;
    overflow: hidden !important;
}
  .register-bg {
    padding: 40px 20px;
  }

  .register-bg {
    padding: 30px 20px;
  }





}



 



/* Ensure dropdown never shows on desktop */
@media (min-width: 801px) {
  .cch-mobile-menu {
    display: none !important;
  }
}



/* -------------------------------------------------- 
   4. TABLET HEADER (801PX – 1200PX)
-------------------------------------------------- */
@media (min-width: 801px) and (max-width: 1200px) {
  .header-sections .cinema-custom-header {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;                 /* gap between logo / nav / subscribe */
  }


 #shopify-section-template--16439642816597__main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    min-width: 100%;
    overflow: hidden !important;
  }


  /* wrapper around the table becomes the scroll box */
  .account-main {
    max-width: 100vw;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* let the table be wider than the viewport so it can scroll */
  .account-main > table {
    display: block !important;     /* so it can overflow the div */
    width: max-content !important; /* shrink-wrap to columns */
    min-width: 600px;              /* adjust to how wide you want the full table */
  }










  .account table .payment-status, .account table .total
 {
       display: initial !important; 
       display: table-cell !important;   /* for table cells */
    }












  /* LOGO – allow shrink, max ±28% of row */
  .header-sections .cinema-custom-header > a:first-child {
    flex: 0 1 28%;
    min-width: 0;
  }

  .header-sections .cinema-custom-header > a:first-child img {
    width: 100% !important;           /* ignore intrinsic 300px width */
    height: auto !important;
  }

  /* NAV WRAPPER – takes remaining space */
  .header-sections .cinema-custom-header .cch-marquee {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Shrink subscribe button + keep PNG contained */
  .header-sections .cinema-custom-header .cch-subscribe {
    font-size: 14px;
    line-height: 1;
    padding: 5px 10px;

    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 150px;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Slightly smaller marquee menu text + tighter gap */
  .header-sections .cinema-custom-header .cch-marquee a {
    font-size: 14px;
  }

  .header-sections .cinema-custom-header .cch-set {
    gap: 10px !important;
  }



 .product-item__title {
font-size: 30px !important;
}



#Product--template--17466174570581__main .product__title {
  font-size: 30px;
}


#Product--template--17466174570581__main .product__wrapper__inner {
  padding-left: 20px;
  padding-right: 20px;
}



#Product--template--17466174570581__main .product__images {
  padding-right: 20px !important;
}
#Product--template--17466174570581__main .accordion__title {
  font-size: 16px;
}

.template-product .product-title-price-row .product__price > * {
  padding: 16px;
  font-size: 28px;
}


}

 @media (max-width:800px - min-width:600px) { #shopify-section-template--17466173620309__highlights .highlights__item {
        flex: 0 0 40vw;
    }
  }


@media (max-width:800px) {
    #SectionColumns--template--17466174046293__section_multicolumn_fnj6fk .wrapper--full-padded {
    padding-left:0px !important;
    padding-right:0px !important;
    max-width:90%;
    justify-self:center !important;
  }
    #shopify-section-template--17466174275669__section_slideshow_nested_YYbKXX .wrapper--full, #shopify-section-template--17466174242901__section_slideshow_nested_YYbKXX .wrapper--full, #shopify-section-template--17466174406741__section_slideshow_nested_YYbKXX .wrapper--full, #shopify-section-template--17466173947989__section_slideshow_nested .wrapper--full, #shopify-section-template--17466174013525__section_slideshow_nested_JLYQB6 .wrapper--full, #shopify-section-template--17466174144597__section_slideshow_nested_JLYQB6 .wrapper--full, #Hero--template--17466174144597__section_hero_MraHqU .hero__wrapper.frame.wrapper--full, #shopify-section-template--17466174046293__section_slideshow_nested_WGk9eb .wrapper--full, #shopify-section-template--17872674881621__section_slideshow_nested_YYbKXX .wrapper--full  {
  width: 100% !important;
  max-width: none !important;
  margin: 0px !important;
}


 
}

   .product__content .product-title-price-row, .product__content .product__description {
  max-width: 80% !important;
  width:80% !important;
  justify-self:center !important;
}
.product__content .product-price-stack, product-title-price-row, .product__block {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.product__block .accordion__title {
    max-width: 80% !important;
  width:80% !important;
  justify-self:center !important;
}

}

    .collection__sidebar__slide-out .collection__filters {
         --width: 100% !important; 
         padding: 0px !important;
    }


    .collection__filters {
       --padding: 0px !important;
        width: auto !important; 
    }


/* -------------------------------------------------- 
   5. SAFETY: NEVER SHOW DROPDOWN ON DESKTOP
-------------------------------------------------- */
@media (min-width: 801px) {
  .cch-mobile-menu {
    display: none !important;
  }

}


/* --------------------------------------------------
   TABLET FONT SIZING ONLY
   Middle ground between mobile and desktop
   Range: 801px – 1200px
-------------------------------------------------- */
@media (min-width: 801px) and (max-width: 1200px) {

  /* --------------------------------------------------
     GLOBAL / HERO
  -------------------------------------------------- */
  .hero__title {
    font-size: 48px !important;
  }



  .hero__description {
    font-size: 19px !important;
  }

  .hero__rte {
    font-size: 17px !important;
  }

  .hero__title.heading-large {
    font-size: 40px !important;
  }

  .stacked-hero__heading {
    font-size: 40px !important;
  }

  .column__heading.heading-medium {
    font-size: 40px !important;
  }

  .column__text.rte.body-medium p {
    font-size: 17px !important;
  }

  .section-columns .column__inner .btn span {
    font-size: 22px !important;
  }

  /* --------------------------------------------------
     HOMEPAGE / ARCH
  -------------------------------------------------- */
  /* .arch-center h2 {
    font-size: 52px !important;
  }

  .arch-center p {
    font-size: 18px !important;
  }

  .cinema-feature p {
    font-size: 17px !important;
  }

  .cinema-feature h6 {
    font-size: 22px !important;
  }

  .hero__content h3 {
    font-size: 22px !important;
  } */

  /* --------------------------------------------------
     HEADER
  -------------------------------------------------- */
  /* .header-sections .cinema-custom-header .cch-marquee a,
  .cch-menu a {
    font-size: 18px !important;
  }

  .header-sections .cinema-custom-header .cch-subscribe,
  .cch-subscribe {
    font-size: 16px !important;
  } */

  /* --------------------------------------------------
     COLLECTIONS
  -------------------------------------------------- */
  .collection__title .hero__description {
    font-size: 17px !important;
  }

  .product-piece-count {
    font-size: 15px !important;
  }

  .product-item__title {
    font-size: 30px !important;
  }

  .popout__toggle {
    font-size: 18px !important;
  }

  .product-card-atc-btn {
    font-size: 16px !important;
  }
  

  .pagination-custom__inner,
  .pagination-custom__next,
  .pagination-custom__prev {
    font-size: 16px !important;
  }

  .cp-breadcrumbs__link,
  .cp-breadcrumbs__item--current {
    font-size: 16px !important;
  }

  .cp-breadcrumbs__separator {
    font-size: 20px !important;
  }

  /* --------------------------------------------------
     PRODUCT PAGE
  -------------------------------------------------- */
  #Product--template--17466174570581__main .product__title,
  .template-product .product-title-price-row h1.product_title_heading-large,
  .template-product .product-title-price-row h1.product__title {
    font-size: 34px !important;
  }

  #Product--template--17466174570581__main .product__price > *,
  .template-product .product-title-price-row .product__price > * {
    font-size: 28px !important;
  }

  #Product--template--17466174570581__main .product-piece-count,
  .template-product .product-title-price-row .product-piece-count {
    font-size: 17px !important;
  }

  #Product--template--17466174570581__main .product__description__content .rte,
  .template-product .product__description__content,
  .template-product .product__description__content p {
    font-size: 17px !important;
  }

  .template-product form[action="/cart/add"] .quantity-selector,
  .template-product form[action="/cart/add"] button[type="submit"][name="add"],
  .template-product form[action="/cart/add"] .product__submit__add {
    font-size: 16px !important;
  }

  .template-product .product__block.product__text.block-padding.text-center p.product__heading {
    font-size: 28px !important;
  }

  .template-product .product__block.product__text.block-padding.text-center .product__subheading,
  .template-product .product__block.product__text.block-padding.text-center .product__subheading a {
    font-size: 17px !important;
  }

  .template-product .drawer__heading {
    font-size: 22px !important;
  }

  .template-product .drawer__body ul li {
    font-size: 15px !important;
  }

  .template-product .drawer__body p {
    font-size: 13px !important;
  }

  .template-product .accordion__title,
  #Product--template--17466174570581__main .accordion__title {
    font-size: 18px !important;
  }

  

  /* --------------------------------------------------
     CONTACT / FORMS
  -------------------------------------------------- */
  /* .cinema-contact-form .field,
  .cinema-contact-form .cinema-contact-select,
  .cinema-contact-wrapper .cinema-contact-field,
  .cinema-contact-wrapper .cinema-contact-field::placeholder,
  .cinema-contact-dropdown-toggle,
  .cinema-contact-dropdown-option {
    font-size: 17px !important;
  }

  .cinema-contact-terms {
    font-size: 14px !important;
  }

  .cinema-contact-success__title {
    font-size: 44px !important;
  }

  .cinema-contact-success__text {
    font-size: 18px !important;
  } */

  /* --------------------------------------------------
     BUTTONS / LINKS
  -------------------------------------------------- */
  .cinema-blue-btn,
  .cinema-blue-btn-outline,
  .btn--no-underline,
  body.template-cart button[name="update"].cart__checkout,
  body.template-cart button[name="checkout"].cart__checkout {
    font-size: 16px !important;
  }

  a[href="/pages/contact"][title="Call Sheet"],
  a[href="mailto:privacy@cinemapuzzles.com"][title="mailto:privacy@cinemapuzzles.com"],
  a[href="mailto:support@cinemapuzzles.com"][title="mailto:support@cinemapuzzles.com"] {
    font-size: 16px !important;
  }

  /* --------------------------------------------------
     SUBSCRIPTION & GIFTS
  -------------------------------------------------- */
  #subscription-and-gifts .index-rte-columns .rich-text-columns__right h2.hero__title {
    font-size: 28px !important;
  }

  #subscription-and-gifts .rte-two-col__inner h3 {
    font-size: 18px !important;
  }

  #subscription-and-gifts .rte-two-col__inner h4 {
    font-size: 18px !important;
  }

  #subscription-and-gifts .rte-two-col__inner p {
    font-size: 17px !important;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right .hero__title {
    font-size: 24px !important;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right h3,
  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right h4 {
    font-size: 20px !important;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right p {
    font-size: 17px !important;
  }

  /* --------------------------------------------------
     DIRECTORS CUT / SPECIFIC SECTIONS
  -------------------------------------------------- */
  #shopify-section-template--16439643144277__section_double_3cZCyx p[data-aos-order="4"] {
    font-size: 18px !important;
  }

  #shopify-section-template--16439643144277__section_double_3cZCyx div[data-aos-order="5"] > p {
    font-size: 15px !important;
  }

  #Rte--template--16439642751061__section_rich_text_kjPkmk .hero__title h2 {
    font-size: 40px !important;
  }

  #shopify-section-template--16439642652757__section_hero_WKmUa3 .hero__title {
    font-size: 44px !important;
  }

  #Hero--template--16439642652757__section_hero_WKmUa3 .body-large p {
    font-size: 20px !important;
  }

  #Hero--template--16439642652757__section_hero_WKmUa3 .body-medium p {
    font-size: 17px !important;
  }

  /* --------------------------------------------------
     LEGAL / HYGIENE PAGES
  -------------------------------------------------- */
  #privacy-policy [id^="shopify-section-template--16798856249429__section_custom_content"] .hero__title,
  #terms-amp-conditions [id^="shopify-section-template--16774557499477__section_custom_content"] .hero__title,
  #shipping-amp-returns-policy [id^="shopify-section-template--16798934204501__section_custom_content"] .hero__title {
    font-size: 22px !important;
  }

  #privacy-policy [id^="shopify-section-template--16798856249429__section_custom_content"] .hero__rte p,
  #terms-amp-conditions [id^="shopify-section-template--16774557499477__section_custom_content"] .hero__rte p,
  #shipping-amp-returns-policy [id^="shopify-section-template--16798934204501__section_custom_content"] .hero__rte p {
    font-size: 17px !important;
  }

  #shopify-section-template--16798934204501__section_rich_text_C6jEyn .hero__title {
    font-size: 28px !important;
  }

  /* --------------------------------------------------
     ACCOUNT / LOGIN / REGISTER
  -------------------------------------------------- */
  .account--login .fade-toggle .page__heading,
  .login .page__heading,
  .register-heading {
    font-size: 44px !important;
  }

  .account--login .fade-toggle .form-message,
  .account--login .fade-toggle .form__legal p,
  .account--login .login > p,
  .register-sub {
    font-size: 15px !important;
  }

  .account--login .form-field input[type="email"],
  .account--login .form-field input[type="password"],
  .account--login .form-field input::placeholder,
  .register-content input[type="text"],
  .register-content input[type="email"],
  .register-content input[type="password"],
  .register-content input::placeholder,
  .register-content.register-fields-active input[type="text"],
  .register-content.register-fields-active input[type="email"],
  .register-content.register-fields-active input[type="password"] {
    font-size: 15px !important;
  }

  /* --------------------------------------------------
     CART
  -------------------------------------------------- */
  .cart__title,
  .cart__aside-title {
    font-size: 34px !important;
  }

  .cart__item__title {
    font-size: 28px !important;
  }

  .cart__items-count-row,
  .free-shipping,
  .free-shipping__default-message,
  .free-shipping__success-message {
    font-size: 16px !important;
  }

  .cart__widget__title {
    font-size: 16px !important;
  }

  .cart__widget__content__inner label {
    font-size: 15px !important;
  }

  .cart__price,
  .cart__item__price {
    font-size: 26px !important;
  }

  .cart-line__price {
    font-size: 15px !important;
  }

  .cart__quantity-field {
    font-size: 16px !important;
  }

  .cart__item__remove {
    font-size: 13px !important;
  }

  .cart__total__price {
    font-size: 22px !important;
  }

  .cart__total__label {
    font-size: 11px !important;
  }

  .cart__item__content-inner .product-piece-count {
    font-size: 15px !important;
  }
}



/* --------------------------------------------------
   TABLET WRAPPER / CONTAINER PADDING ONLY
   Middle ground between mobile and desktop
   Range: 801px – 1200px
-------------------------------------------------- */
@media (min-width: 801px) and (max-width: 1200px) {

  /* --------------------------------------------------
     GLOBAL / HEADER
  -------------------------------------------------- */
  .header-sections .cinema-custom-header {
    padding: 20px 40px 30px !important;
  }

  .theme__header .section-padding {
    padding: 12px 40px !important;
  }

  /* --------------------------------------------------
     PRODUCT PAGE
  -------------------------------------------------- */
  #Product--template--17466174570581__main .product__wrapper__inner,
  .template-product .product__wrapper__inner {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  #Product--template--17466174570581__main .product__images {
    padding-right: 24px !important;
  }

  #Product--template--17466174570581__main .product__title {
    padding: 20px !important;
  }

  #Product--template--17466174570581__main .product__price > *,
  .template-product .product-title-price-row .product__price > * {
    padding: 14px !important;
  }

  .template-product .product-title-price-row h1.product_title_heading-large,
  .template-product .product-title-price-row h1.product__title {
    padding: 20px !important;
  }

  .template-product .product__description__content {
    padding: 24px 18px !important;
    margin-bottom: 32px !important;
  }

  .template-product .product__block.product__text.block-padding.text-center {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .template-product .drawer__inner {
    padding: 24px !important;
  }

 

  /* --------------------------------------------------
     RELATED / COLLECTION PRODUCT GRIDS
  -------------------------------------------------- */
  #shopify-section-template--17466174570581__related .grid {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .collection__title {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }

  .collection__products .grid {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .collection__products {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .highlights__items {
    padding: 0 20px !important;
  }

  /* --------------------------------------------------
     FOOTER
  -------------------------------------------------- */
  #shopify-section-sections--16439635214421__footer .footer__blocks,
  #shopify-section-sections--16439635214421__footer .footer__block {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .supporting-menu {
    margin-left: 24px !important;
    margin-right: 24px !important;
    margin-bottom: 32px !important;
  }

  /* --------------------------------------------------
     MULTICOLUMN / TEXT / CONTENT WRAPPERS
  -------------------------------------------------- */
  .rich-text-columns__wrapper {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
  }

  .stacked-hero__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
  }

  /* .brick__section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  } */

  #SectionColumns--template--16439643177045__section_multicolumn_fnj6fk .wrapper--full-padded,
  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .wrapper--full-padded {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #SectionColumns--sections--16439635312725__section_text_row_eRtQ6p .wrapper {
    max-width: 80% !important;
    min-width: 80% !important;
    width: 80% !important;
  }

  /* --------------------------------------------------
     SUBSCRIPTION & GIFTS
  -------------------------------------------------- */
  #subscription-and-gifts .hero__button-group {
    padding-top: 24px !important;
    padding-bottom: 60px !important;
  }

  #subscription-and-gifts .hero__rte p {
    padding-bottom: 24px !important;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .hero__button-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right .rte-columns-block:nth-of-type(5),
  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right .rte-columns-block:nth-of-type(8),
  #RteColumns--template--17018568245333__section_rich_text_columns_gfeYw8 .rich-text-columns__right .rte-columns-block:nth-of-type(11) {
    padding-top: 56px !important;
    margin-top: 40px !important;
  }

  /* --------------------------------------------------
     CONTACT PAGE / FORM
  -------------------------------------------------- */
  /* .cinema-contact-wrapper {
    margin: 0 0 32px !important;
  }

  .cinema-contact-wrapper .cinema-contact-field,
  .cinema-contact-dropdown-toggle {
    padding: 14px !important;
    margin-bottom: 20px !important;
  }

  .cinema-contact-wrapper .cinema-contact-message,
  .cinema-contact-form .cinema-contact-message {
    padding: 20px 16px 10px 16px !important;
  }

  .cinema-contact-success {
    padding-left: 24px !important;
    padding-right: 24px !important;
  } */

  /* --------------------------------------------------
     CART
  -------------------------------------------------- */
  .cart {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .cart__title {
    padding-left: 0 !important;
  }

  .cart__item {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .cart__items .cart__item__image {
    margin-right: 24px !important;
  }

  .cart-line__price {
    margin-top: 20px !important;
  }

  .cart__quantity-counter {
    margin-top: 20px !important;
  }

  .cart__button-continue .cinema-blue-btn {
    margin-bottom: 24px !important;
  }

  .cart__aside {
    max-width: 100% !important;
  }

  /* --------------------------------------------------
     ACCOUNT / LOGIN / REGISTER
  -------------------------------------------------- */
  /* .account--login .fade-toggle {
    max-width: 70% !important;
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }

  .account--login .login.fade-toggle.is-hidden {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  .register-bg {
    padding: 36px 32px !important;
  } */

  /* --------------------------------------------------
     LEGAL / HYGIENE / HERO SECTIONS
  -------------------------------------------------- */
  

  #BrickSection--template--16798934204501__section_custom_content_bCpmdr .hero__button {
    margin-bottom: 24px !important;
  }

  #shopify-section-template--16439642783829__hero .collection-image-with-title {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #SectionColumns--sections--16439635312725__section_text_row_eRtQ6p {
  max-width: 800px !important;
  --COLUMNS-SMALL: 4 !important;
  justify-self: center !important;
}

#SectionColumns--sections--16439635312725__section_text_row_eRtQ6p img {
  max-width: 80px !important;
  padding: 10px;
}

}


/* ==================================================
   BLOG & ARTICLE PAGES — Cinema Puzzles
   Scope: .template-blog  → blog listing page
          .template-article → individual blog post
          Both selectors together → shared
   ================================================== */


/* --------------------------------------------------
   SHARED: Category tag chip colours
   Applied to filter nav on listing + card tags on both
-------------------------------------------------- */

.template-blog .inline-nav a,
.template-blog .article__tag,
.template-article .article__tag {
  font-family: "Roc Grotesk";
  font-size: 18px;
  font-weight: 750;
  line-height: 100%;
  text-transform: uppercase;
  text-decoration: none;
}

/* All / active */
.template-blog .inline-nav li.inline-nav--active a,
.template-blog .inline-nav li:first-child a {
  color: #4f71fd;
}

/* News */
.template-blog .inline-nav a[href*="/tagged/news"],
.template-blog .article__tag[href*="/tagged/news"],
.template-article .article__tag[href*="/tagged/news"] { color: #ee232f; }

/* Blogs */
.template-blog .inline-nav a[href*="/tagged/blogs"],
.template-blog .article__tag[href*="/tagged/blogs"],
.template-article .article__tag[href*="/tagged/blogs"] { color: #feda52; }

/* Guides */
.template-blog .inline-nav a[href*="/tagged/guides"],
.template-blog .article__tag[href*="/tagged/guides"],
.template-article .article__tag[href*="/tagged/guides"] { color: #18b78d; }

/* Behind the scenes */
.template-blog .inline-nav a[href*="/tagged/behind-the-scenes"],
.template-blog .article__tag[href*="/tagged/behind-the-scenes"],
.template-article .article__tag[href*="/tagged/behind-the-scenes"] { color: #ffccfb; }

/* Tutorials */
.template-blog .inline-nav a[href*="/tagged/tutorials"],
.template-blog .article__tag[href*="/tagged/tutorials"],
.template-article .article__tag[href*="/tagged/tutorials"] { color: #d6fffa; }


/* --------------------------------------------------
   SHARED: Blog preview cards
   Same card design on listing page AND "View more
   posts" section at the bottom of the article page
-------------------------------------------------- */

.template-blog .article.grid-item,
.template-article .article.grid-item {
  border: 1px solid var(--color-off-white, #faf1e7);
  border-radius: 32px;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

/* Card image */
.template-blog .article.grid-item .article__image,
.template-article .article.grid-item .article__image {
  border-radius: 24px;
  overflow: hidden;
}

.template-blog .article.grid-item .article__image img,
.template-article .article.grid-item .article__image img {
  border-radius: 24px;
  display: block;
  width: 100%;
}

/* Card text area */
.template-blog .article.grid-item .article__text-wrapper,
.template-article .article.grid-item .article__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
}

/* Card title */
.template-blog .article.grid-item .article__title a,
.template-article .article.grid-item .article__title a {
  color: var(--color-off-white, #faf1e7);
  font-family: "Awesome Serif VAR";
  font-size: 40px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
  text-decoration: none;
}

/* Card excerpt */
.template-blog .article.grid-item .article__excerpt,
.template-article .article.grid-item .article__excerpt {
  color: var(--color-off-white, #faf1e7);
  font-family: "Univers Next Pro";
  font-size: 24px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.24px;
}

/* Card meta (date · read time) */
.template-blog .article.grid-item .article__meta,
.template-article .article.grid-item .article__meta {
  color: var(--color-off-white, #faf1e7);
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.36px;
}

/* Author name inside card meta */
.template-blog .article.grid-item .article__meta__author,
.template-article .article.grid-item .article__meta__author {
  font-family: "Roc Grotesk";
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 100%;
}

/* "Read more" button on cards */
.template-blog .article.grid-item .article__link a,
.template-article .article.grid-item .article__link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 49px;
  padding: 0 24px;
  border-radius: 32px;
  border: 2px solid var(--color-off-white, #faf1e7);
  color: var(--color-off-white, #faf1e7);
  font-family: "Roc Grotesk";
  font-size: 18px;
  font-weight: 750;
  text-transform: uppercase;
  text-decoration: none;
}


/* --------------------------------------------------
   BLOG LISTING PAGE
-------------------------------------------------- */

/* Page title e.g. "Behind the Scenes" */
.template-blog .blog__title {
  color: var(--color-off-white, #faf1e7);
  text-align: center;
  font-family: "Awesome Serif VAR";
  font-size: 56px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
}

/* Category filter row */
.template-blog .inline-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 16px 0;
}

.template-blog .inline-nav li a {
  display: inline-block;
  padding: 8px 16px;
  color: var(--color-off-white, #faf1e7);
}


/* --------------------------------------------------
   ARTICLE (BLOG POST) PAGE
-------------------------------------------------- */

/* Post title — Display 1: Roc Grotesk Wide ExtraBold 88px */
.template-article .article__title.h2 {
  color: var(--color-off-white, #faf1e7);
  font-family: "Roc Grotesk";
  font-size: 88px;
  font-style: normal;
  font-weight: 750;
  line-height: 110%;
  text-transform: uppercase;
  text-align: left;
}

/* Post meta row: author + date */
.template-article .article-single .article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  color: var(--color-off-white, #faf1e7);
  font-family: "Univers Next Pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.36px;
}

.template-article .article-single .article__meta .article__author,
.template-article .article-single .article__meta__author {
  font-family: "Roc Grotesk";
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 100%;
}

/* --------------------------------------------------
   ARTICLE BODY CONTENT — override Broadcast defaults
   The theme uses font-size/line-height inherit chains
   via CSS vars; !important breaks the conflict cleanly
-------------------------------------------------- */

/* Paragraphs */
.template-article .article__content.rte p,
.template-article .article__content p {
  color: #faf1e7 !important;
  font-family: "Univers Next Pro" !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 16px;
}

/* Section headings in article body */
.template-article .article__content.rte h1,
.template-article .article__content.rte h2,
.template-article .article__content.rte h3,
.template-article .article__content.rte h4,
.template-article .article__content h1,
.template-article .article__content h2,
.template-article .article__content h3,
.template-article .article__content h4 {
  color: #faf1e7 !important;
  font-family: "Awesome Serif VAR" !important;
  font-style: normal !important;
  font-weight: 350 !important;
  line-height: 105% !important;
  padding-top: 24px;
  margin-bottom: 16px;
}

.template-article .article__content h2,
.template-article .article__content h3 { font-size: 40px !important; }
.template-article .article__content h4  { font-size: 32px !important; }

/* Blockquote / pull-quote */
.template-article .article__content.rte blockquote,
.template-article .article__content blockquote {
  margin: 36px 0 !important;
  padding: 36px 0 36px 20px !important;
  border-left: 2px solid #faf1e7 !important;
  font-style: normal !important;
}

.template-article .article__content.rte blockquote p,
.template-article .article__content blockquote p {
  font-family: "Awesome Serif VAR" !important;
  font-size: 56px !important;
  font-weight: 350 !important;
  line-height: 105% !important;
  letter-spacing: 0 !important;
  color: #faf1e7 !important;
  margin: 0 !important;
}

/* Lists */
.template-article .article__content.rte ul,
.template-article .article__content.rte ol,
.template-article .article__content ul,
.template-article .article__content ol {
  color: #faf1e7 !important;
  font-family: "Univers Next Pro" !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  letter-spacing: 0.4px !important;
  padding-left: 24px;
  margin-bottom: 16px;
}

/* Inline images */
.template-article .article__content figure {
  margin: 48px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.template-article .article__content figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Image captions */
.template-article .article__content figcaption {
  display: flex;
  gap: 8px;
  align-items: stretch;
  color: #faf1e7;
  font-family: "Roc Grotesk";
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 100%;
}

.template-article .article__content figcaption::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 2px;
  background-color: #faf1e7;
  align-self: stretch;
}

/* Links inside body — kill Broadcast's gradient text trick */
.template-article .article__content.rte a,
.template-article .article__content a {
  color: #a7b8fe !important;
  -webkit-text-fill-color: #a7b8fe !important;
  background-image: none !important;
  text-decoration: none;
}

.template-article .article__content.rte a:hover,
.template-article .article__content a:hover {
  text-decoration: underline;
  color: #a7b8fe !important;
  -webkit-text-fill-color: #a7b8fe !important;
}

.template-article .article__content.rte a::after,
.template-article .article__content a::after {
  display: none !important;
}


/* --- Sidebar --- */

/* "If You Liked This One..." / related products heading box */
.template-article .sidebar .widget__title {
  color: var(--color-off-white, #faf1e7);
  font-family: "Awesome Serif VAR";
  font-size: 32px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
  text-align: center;
  border: 1px solid var(--color-off-white, #faf1e7);
  border-radius: 18px;
  padding: 20px 16px;
  margin-bottom: 24px;
}

/* --- "View more posts" section at the bottom of the post --- */

/* Section heading "View more posts" */
.template-article .blog-section .blog__title,
.template-article .blog-section .page__heading {
  color: var(--color-off-white, #faf1e7);
  font-family: "Awesome Serif VAR";
  font-size: 40px;
  font-style: normal;
  font-weight: 350;
  line-height: 105%;
}

/* "View all" button next to heading */
.template-article .blog-section .btn--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1.4px solid var(--color-off-white, #faf1e7);
  color: var(--color-off-white, #faf1e7);
  font-family: "Roc Grotesk";
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
  text-decoration: none;
}

/* --------------------------------------------------
   ARTICLE PAGE — RELATED PRODUCTS SIDEBAR
   Targets .template-article .sidebar .widget__column*
   which is rendered by snippets/product-column-item.liquid
-------------------------------------------------- */

/* "If You Liked This One..." heading — bordered box */
.template-article .sidebar .widget__title {
  color: #faf1e7 !important;
  font-family: "Awesome Serif VAR" !important;
  font-size: 32px !important;
  font-style: normal !important;
  font-weight: 350 !important;
  line-height: 105% !important;
  text-align: center !important;

  /* override theme's bottom-border-only treatment */
  border: 1px solid #faf1e7 !important;
  border-radius: 18px !important;
  padding: 20px 16px !important;
  margin: 0 0 24px !important;
}

/* Product card wrapper — flip from horizontal to vertical */
.template-article .sidebar .widget__column {
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: unset !important;
  overflow: hidden;
  margin-bottom: 24px !important;
  background: transparent;
  text-decoration: none;
  border:none !important;
}


.template-article .sidebar .widget__column:last-child {
  margin-bottom: 0 !important;
}

.template-article .sidebar .widget__column:hover {
  box-shadow: none !important;
  opacity: 0.85;
}

/* Product image — full-width, fixed height */
.template-article .sidebar .widget__column__image {
  flex: 0 0 auto !important;
  width: 100% !important;
  align-self: auto !important;
}

.template-article .sidebar .widget__column__image img {
  width: 100%;
  height: auto;
  display: block;
}


/* Product text area */
.template-article .sidebar .widget__column__contents {
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Product title */
.template-article .sidebar .widget__column__title {
  color: #faf1e7 !important;
  font-family: "Awesome Serif VAR" !important;
  font-size: 28px !important;
  font-style: normal !important;
  font-weight: 350 !important;
  line-height: 105% !important;
  text-align: center !important;
  margin: 0 !important;
}

/* strip the bold tag the snippet wraps title in */
.template-article .sidebar .widget__column__title strong {
  font-weight: 350 !important;
}

/* Price row */
.template-article .sidebar .widget__column .meta--light {
  margin-top: 4px !important;
  font-size: 22px !important;
  text-align: right;
}

.template-article .sidebar .widget__column .price {
  color: #faf1e7 !important;
  font-family: "Roc Grotesk" !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 110% !important;
  text-transform: uppercase;
  -webkit-text-fill-color: #faf1e7 !important;
  background-image: none !important;
}

.template-article .sidebar .widget__column .new-price {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
}

.template-article .sidebar .widget__column .old-price {
  color: rgba(250, 241, 231, 0.5) !important;
  -webkit-text-fill-color: rgba(250, 241, 231, 0.5) !important;
  font-size: 16px !important;
  text-decoration: line-through;
}

.template-article .sidebar .widget__column .sold-out {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  font-family: "Roc Grotesk" !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}





/* widget__column is now a <div> — make the inner link fill it */
.template-article .sidebar .widget__column__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
}

/* Centre the ATC button under the card */
.template-article .sidebar .widget__column__atc {
  display: flex;
  justify-content: center;
  padding: 16px 16px 0;
}

/* --------------------------------------------------
   ARTICLE HERO — full-bleed image + header layout
-------------------------------------------------- */

/* Full-bleed image */
.template-article .article__hero__bg {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.template-article .article__hero__bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Gradient fade to dark at bottom of image */
.template-article .article__hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,25,25,0) 40%, #1a1919 100%);
  pointer-events: none;
}

/* Content below image */
.template-article .article__hero__content {
  padding-top: 80px;
}

/* ← All Posts back link */
.template-article .article__back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  background-image: none !important;
  font-family: "Roc Grotesk" !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-bottom: 48px;
}

.template-article .article__back-link::after {
  display: none !important;
}

.template-article .article__back-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: #faf1e7;
}

/* Article title */
.template-article .article__title.h2 {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  background-image: none !important;
  font-family: "Roc Grotesk" !important;
  font-size: 88px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 110% !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin-bottom: 80px;
}

/* Author + share row */
.template-article .article__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 48px;
}

.template-article .article__header-row .article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin: 0;
  color: #faf1e7 !important;
  font-family: "Univers Next Pro" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 120% !important;
  letter-spacing: 0.36px;
}

.template-article .article__header-row .article__meta__author {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  font-family: "Roc Grotesk" !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 100% !important;
}

.template-article .article__header-row time {
  color: #faf1e7;
  font-family: "Univers Next Pro" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

.template-article .article__hero__bg {
  height: 800px !important;
}

/* --------------------------------------------------
   ARTICLE HEADER — contributor row
-------------------------------------------------- */

.template-article .article__contributor {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Author avatar */
.template-article .article__contributor__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.template-article .article__contributor__avatar img,
.template-article .article__contributor__avatar figure {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.template-article .article__contributor__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}


/* Author name */
.template-article .article__meta__author {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  font-family: "Roc Grotesk" !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 100% !important;
}

/* Date · dot · read time row */
.template-article .article__meta__time {
  display: flex;
  align-items: center;
  gap: 8px;
}

.template-article .article__meta__time time,
.template-article .article__meta__readtime {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  font-family: "Univers Next Pro" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 120% !important;
  letter-spacing: 0.36px;
}

/* Green dot divider */
.template-article .article__meta__dot,
.template-blog .article__meta__dot {
 
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #18b78d;
  flex-shrink: 0;
}

/* Divider between article hero and body */
.template-article .article__wrapper {
  position: relative;
}

.template-article .article__wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: rgba(250, 241, 231, 0.2);
}


/* Hide the heading in the sidebar link widget */
.template-article .sidebar .widget--categories .widget__title {
  display: none !important;
}

/* Style the link as cinema-blue-btn */
.template-article .sidebar .widget--categories .widget__link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 250px !important;
  height: 47.565px !important;
  margin: 0 auto;

  background-image: url("/cdn/shop/files/Subscribe_button_container_430x.png?v=1763390332") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;

  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Kill Broadcast's gradient underline on the link */
.template-article .sidebar .widget--categories .widget__link::after {
  display: none !important;
}

/* --------------------------------------------------
   FEATURED POST SECTION — blog page
-------------------------------------------------- */

/* Dividers top + bottom */
.template-blog .featured-posts {
  border-top: 1px solid rgba(250, 241, 231, 0.2);
  border-bottom: 1px solid rgba(250, 241, 231, 0.2);
}

/* Two-column layout */
.template-blog .featured-posts .editorial {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 550px;
}

/* Left: image fills full height */
.template-blog .featured-posts .editorial__image {
  flex: 0 0 50% !important;
  width: 50% !important;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(250, 241, 231, 0.2);
}

.template-blog .featured-posts .editorial__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
}

.template-blog .featured-posts .editorial__image .image-wrapper {
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}

/* Right: content centered */
.template-blog .featured-posts .editorial__aside {
  flex: 0 0 50% !important;
  width: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 80px !important;
}

.template-blog .featured-posts .editorial__aside-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 688px;
}

/* Category chip */
.template-blog .featured-posts .featured-post__tag {
  font-family: "Roc Grotesk" !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  line-height: 100% !important;
  text-decoration: none;
  padding: 8px 16px;
  display: inline-block;
}

/* Title bordered box */
.template-blog .featured-posts .featured-post__title-box {
  border: 2px solid #faf1e7;
  border-radius: 32px;
  padding: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.template-blog .featured-posts .editorial__title {
  margin: 0 !important;
  text-align: center;
}

.template-blog .featured-posts .editorial__title a {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  background-image: none !important;
  font-family: "Awesome Serif VAR" !important;
  font-size: 40px !important;
  font-weight: 350 !important;
  line-height: 105% !important;
  text-decoration: none !important;
  text-align: center;
}

.template-blog .featured-posts .editorial__title a::after {
  display: none !important;
}

/* Excerpt */
.template-blog .featured-posts .editorial__excerpt p {
  color: #faf1e7 !important;
  font-family: "Univers Next Pro" !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  letter-spacing: 0.24px;
  text-align: center;
  margin: 0;
}

/* Contributor */
.template-blog .featured-posts .featured-post__contributor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.template-blog .featured-posts .featured-post__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.template-blog .featured-posts .featured-post__avatar img,
.template-blog .featured-posts .featured-post__avatar figure {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.template-blog .featured-posts .featured-post__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.template-blog .featured-posts .featured-post__author {
  color: #faf1e7 !important;
  font-family: "Roc Grotesk" !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 100% !important;
}

.template-blog .featured-posts .featured-post__time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #faf1e7;
  font-family: "Univers Next Pro" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 120% !important;
  letter-spacing: 0.36px;
}

.template-blog .featured-posts .featured-post__time time,
.template-blog .featured-posts .featured-post__time span {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
}

/* Read More button */
.template-blog .featured-posts .editorial__link {
  margin-top: 8px;
}

.template-blog .featured-posts .editorial__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* --------------------------------------------------
   BLOG GRID CARDS — image, tag, meta
-------------------------------------------------- */

/* Fixed height image with rounded corners */
.template-blog .article.grid-item .article__image,
.template-article .article.grid-item .article__image {
  border-radius: 24px !important;
  overflow: hidden;
  height: 432px;
}

.template-blog .article.grid-item .article__image .image-wrapper,
.template-article .article.grid-item .article__image .image-wrapper {
  height: 100% !important;
  padding-bottom: 0 !important;
}

.template-blog .article.grid-item .article__image img,
.template-article .article.grid-item .article__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Text wrapper padding */
.template-blog .article.grid-item .article__text-wrapper,
.template-article .article.grid-item .article__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
}

/* Avatar + info row */
.template-blog .article.grid-item .article__card-meta,
.template-article .article.grid-item .article__card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.template-blog .article.grid-item .article__card-avatar,
.template-article .article.grid-item .article__card-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.template-blog .article.grid-item .article__card-avatar img,
.template-blog .article.grid-item .article__card-avatar figure,
.template-article .article.grid-item .article__card-avatar img,
.template-article .article.grid-item .article__card-avatar figure {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.template-blog .article.grid-item .article__card-info,
.template-article .article.grid-item .article__card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Author name */
.template-blog .article.grid-item .article__card-author,
.template-article .article.grid-item .article__card-author {
  color: #faf1e7 !important;
  font-family: "Roc Grotesk" !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 100% !important;
}

/* Date · dot · read time */
.template-blog .article.grid-item .article__card-time,
.template-article .article.grid-item .article__card-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Univers Next Pro" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 120% !important;
  letter-spacing: 0.36px;
}

.template-blog .article.grid-item .article__card-time time,
.template-blog .article.grid-item .article__card-time span,
.template-article .article.grid-item .article__card-time time,
.template-article .article.grid-item .article__card-time span {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
}

.template-blog .article.grid-item,
.template-article .article.grid-item {
  border: 1px solid #faf1e7;
  border-radius: 32px;
  padding: 16px 16px 24px;
  box-sizing: border-box;
}


.template-blog .article.grid-item .article__link .cinema-blue-btn,
.template-article .article.grid-item .article__link .cinema-blue-btn {
  border-radius: 0 !important;
}

.template-blog .blog-listing,
.template-article .blog-listing {
  column-gap: 32px !important;
  row-gap: 64px !important;
}


.template-blog .article.grid-item .article__tags,
.template-article .article.grid-item .article__tags {
  padding: 0;
  margin: 0;
}


.template-article .article__tags.h3 {
  display: none !important;
}

.template-article .right {
  display:none !important;
}

.template-article .left {
  display:none !important;
}

.template-article .article.article--single .share-holder {
  display: none !important;
}

.template-article [data-section-type="custom-content"] .btn--white.btn--solid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  border: 1.4px solid #faf1e7 !important;
  background: transparent !important;
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  background-image: none !important;
  font-family: "Roc Grotesk" !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.template-article [data-section-type="custom-content"] .btn--white.btn--solid::after {
  display: none !important;
}

/* Align heading and button on the same baseline */
.template-article [data-section-type="custom-content"] .brick_section.wrapper--full-padded {
  align-items: center !important;
  justify-content: space-between !important;
}

/* Heading size */
.template-article [data-section-type="custom-content"] .hero__title {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  font-family: "Awesome Serif VAR" !important;
  font-size: 40px !important;
  font-weight: 350 !important;
  line-height: 105% !important;
  margin: 0 !important;
}

/* Push button to the right */
.template-article [data-section-type="custom-content"] .brick_block:last-child {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Remove extra padding from the button block */
.template-article [data-section-type="custom-content"] .hero__button {
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.template-article [data-section-type="custom-content"] .btn--white.btn--solid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 10px 40px !important;
  border-radius: 16px !important;
  border: 1.4px solid #faf1e7 !important;
  background: transparent !important;
  background-image: none !important;
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  font-family: "Roc Grotesk" !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Fix Broadcast's span transform breaking vertical centering */
.template-article [data-section-type="custom-content"] .btn--white.btn--solid span {
  display: inline !important;
  height: auto !important;
  transform: none !important;
  position: static !important;
  vertical-align: baseline !important;
  line-height: 1 !important;
}

.template-article .article__header-row .sharing-button {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
}

.template-article .article__header-row .sharing-button__text {
  color: #faf1e7 !important;
  -webkit-text-fill-color: #faf1e7 !important;
  background-image: none !important;
  font-family: "Roc Grotesk" !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 100% !important;
}

.template-article .article__header-row .sharing-button__text::after {
  display: none !important;
}


/* =====================================================
   RESPONSIVE — BLOG & ARTICLE PAGES
   Tablet: 750px–1200px  |  Mobile: ≤749px
   ===================================================== */


/* -------------------------------------------------------
   TABLET (750px – 1200px)
   Logical blend — two columns, reduced type scale
------------------------------------------------------- */
@media only screen and (min-width: 750px) and (max-width: 1200px) {

  /* Blog listing title */
  .template-blog .blog__title { font-size: 40px !important; }

  /* Blog grid gaps */
  .template-blog .blog-listing,
  .template-article .blog-listing {
    column-gap: 24px !important;
    row-gap: 40px !important;
  }

  /* Blog card */
  .template-blog .article.grid-item .article__image,
  .template-article .article.grid-item .article__image { height: 300px; }

  .template-blog .article.grid-item .article__title a,
  .template-article .article.grid-item .article__title a { font-size: 32px !important; }

  .template-blog .article.grid-item .article__excerpt,
  .template-article .article.grid-item .article__excerpt { font-size: 18px !important; }

  /* Featured post — stack vertically */
  .template-blog .featured-posts .editorial {
    flex-direction: column !important;
    min-height: unset !important;
  }

  .template-blog .featured-posts .editorial__image {
    flex: 0 0 380px !important;
    width: 100% !important;
    height: 380px;
    border-right: none !important;
    border-bottom: 1px solid rgba(250, 241, 231, 0.2);
  }

  .template-blog .featured-posts .editorial__aside {
    flex: 1 !important;
    width: 100% !important;
    padding: 48px 40px !important;
  }

  /* Article hero */
  .template-article .article__hero__bg { height: 500px !important; }

  /* Article title */
  .template-article .article__title.h2 {
    font-size: 56px !important;
    margin-bottom: 40px !important;
  }

  /* Article body type */
  .template-article .article__content.rte p,
  .template-article .article__content p { font-size: 18px !important; }

  .template-article .article__content h2,
  .template-article .article__content h3 { font-size: 32px !important; }

  .template-article .article__content.rte blockquote p,
  .template-article .article__content blockquote p { font-size: 40px !important; }
  /* Article — stack content then sidebar */
  .template-article .grid--article {
    grid-template-columns: 1fr !important;
  }

 @media only screen and (min-width: 750px) and (max-width: 1200px) {
  .template-blog [data-section-type="slideshow"] .wrapper--full {
    margin: 0 !important;
    width: 100% !important;
  }
}


  /* Sidebar below article, 3-column product row */
  .template-article .sidebar {
    display: block !important;
    width: 100% !important;
    margin-top: 60px;
  }

  .template-article .sidebar .widget__title {
    max-width: 400px;
    margin: 0 auto 24px !important;
  }

  .template-article .sidebar .widget__products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }

  .template-article .sidebar .widget__column {
    margin-bottom: 0 !important;
  }

  /* Blog posts grid — 1 column on tablet */
  .template-article .blog-listing {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 24px !important;
  }


}


/* -------------------------------------------------------
   MOBILE (≤749px)
   Based directly on Figma mobile designs
------------------------------------------------------- */
@media only screen and (max-width: 749px) {

  /* ===== BLOG LISTING PAGE ===== */

  /* Page title */
  .template-blog .blog__title { font-size: 32px !important; }

  /* Category nav — horizontal scroll */
  .template-blog .inline-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 16px 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .template-blog .inline-nav::-webkit-scrollbar { display: none; }

  /* Blog grid — single column */
  .template-blog .blog-listing,
  .template-article .blog-listing {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 24px !important;
  }

  /* Blog card reduced padding */
  .template-blog .article.grid-item .article__text-wrapper,
  .template-article .article.grid-item .article__text-wrapper {
    padding: 8px 16px 16px !important;
  }

  /* Blog card image height */
  .template-blog .article.grid-item .article__image,
  .template-article .article.grid-item .article__image { height: 327px; }

  /* Blog card type */
  .template-blog .article.grid-item .article__title a,
  .template-article .article.grid-item .article__title a { font-size: 32px !important; }

  .template-blog .article.grid-item .article__excerpt,
  .template-article .article.grid-item .article__excerpt {
    font-size: 16px !important;
    letter-spacing: 0.16px !important;
  }

  /* Blog card avatar */
  .template-blog .article.grid-item .article__card-avatar,
  .template-article .article.grid-item .article__card-avatar {
    width: 48px !important;
    height: 48px !important;
  }


  /* ===== FEATURED POST ===== */

  .template-blog .featured-posts .editorial {
    flex-direction: column !important;
    min-height: unset !important;
  }

  .template-blog .featured-posts .editorial__image {
    flex: 0 0 280px !important;
    width: 100% !important;
    height: 280px;
    border-right: none !important;
    border-bottom: 1px solid rgba(250, 241, 231, 0.2);
  }

  .template-blog .featured-posts .editorial__aside {
    flex: 1 !important;
    width: 100% !important;
    padding: 32px 20px !important;
  }

  .template-blog .featured-posts .featured-post__title-box {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  .template-blog .featured-posts .editorial__title a { font-size: 32px !important; }

  .template-blog .featured-posts .editorial__excerpt p {
    font-size: 16px !important;
    letter-spacing: 0.16px !important;
  }

  .template-blog .featured-posts .featured-post__avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .template-blog .featured-posts .featured-post__author { font-size: 16px !important; }

  .template-blog .featured-posts .featured-post__time,
  .template-blog .featured-posts .featured-post__time time,
  .template-blog .featured-posts .featured-post__time span { font-size: 16px !important; }


  /* ===== ARTICLE PAGE ===== */

  /* Hero image */
  .template-article .article__hero__bg { height: 400px !important; }

  /* Hero content */
  .template-article .article__hero__content { padding-top: 32px !important; }

  /* Back link */
  .template-article .article__back-link { margin-bottom: 24px !important; }

  /* Article title */
  .template-article .article__title.h2 {
    font-size: 42px !important;
    text-align: center !important;
    margin-bottom: 32px !important;
  }

  /* Contributor row — stack vertically */
  .template-article .article__contributor {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .template-article .article__contributor__avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .template-article .article__contributor__info {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .template-article .article__meta__author { font-size: 16px !important; }

  .template-article .article__meta__time time,
  .template-article .article__meta__readtime { font-size: 16px !important; }

  /* Header row — stack */
  .template-article .article__header-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
  }

  /* Article body paragraphs */
  .template-article .article__content.rte p,
  .template-article .article__content p {
    font-size: 16px !important;
    letter-spacing: 0.16px !important;
  }

  /* Article body headings */
  .template-article .article__content.rte h2,
  .template-article .article__content h2,
  .template-article .article__content.rte h3,
  .template-article .article__content h3 { font-size: 32px !important; }

  .template-article .article__content.rte h4,
  .template-article .article__content h4 { font-size: 24px !important; }

  /* Blockquote */
  .template-article .article__content.rte blockquote,
  .template-article .article__content blockquote {
    margin: 24px 0 !important;
    padding: 24px 0 24px 16px !important;
  }

  .template-article .article__content.rte blockquote p,
  .template-article .article__content blockquote p { font-size: 32px !important; }

  /* Lists */
  .template-article .article__content.rte ul,
  .template-article .article__content.rte ol,
  .template-article .article__content ul,
  .template-article .article__content ol { font-size: 16px !important; }

  /* Captions */
  .template-article .article__content figcaption { font-size: 16px !important; }



  /* "View more posts" custom section */
  .template-article [data-section-type="custom-content"] .hero__title {
    font-size: 32px !important;
    text-align: center !important;
  }

  .template-article [data-section-type="custom-content"] .brick_section.wrapper--full-padded {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }
  /* ===== ARTICLE PAGE — mobile tweaks ===== */

/* Center the category tag in article header */
.template-article .article__hero__content .article__tag {
  display: block !important;
  text-align: center !important;
  width: 100%;
}

/* Reduce space between hero image and content below */
.template-article .article__hero__content {
  padding-top: 20px !important;
}

.template-article .article__back-link {
  margin-bottom: 16px !important;
}

/* Keep date + read time inline, just smaller */
.template-article .article__contributor__info {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px 8px !important;
}

.template-article .article__meta__author { font-size: 14px !important; }

.template-article .article__meta__time time,
.template-article .article__meta__readtime { font-size: 13px !important; }

/* "View more posts" + "View all" — centered on mobile */
.template-article [data-section-type="custom-content"] .brick_section.wrapper--full-padded {
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

.template-article [data-section-type="custom-content"] .hero__title {
  text-align: center !important;
}

.template-article [data-section-type="custom-content"] .hero__button {
  margin-left: 0 !important;
  justify-content: center !important;
}


/* ===== BLOG LISTING PAGE — mobile tweaks ===== */

/* Hero image — constrain to mobile viewport height */
.template-blog .featured-posts-hero,
.template-blog [data-section-type="slideshow"] .image-hero,
.template-blog [data-section-type="section-slideshow-nested"] .image-hero,
.template-blog .section-slideshow-nested .image-hero {
  max-height: 100vh !important;
  height: 100svh !important;
}

/* Featured post — swap order: text first, image second */
.template-blog .featured-posts .editorial {
  flex-direction: column-reverse !important;
}

/* Move divider to top of image (now at bottom) */
.template-blog .featured-posts .editorial__image {
  border-bottom: none !important;
  border-top: 1px solid rgba(250, 241, 231, 0.2) !important;
}

/* Center category tag in featured post */
.template-blog .featured-posts .featured-post__tag {
  display: block !important;
  text-align: center !important;
  width: 100%;
}

/* ===== BLOG GRID CARDS — keep date/time inline on mobile ===== */

/* Smaller text so they don't wrap */
.template-blog .article.grid-item .article__card-time time,
.template-blog .article.grid-item .article__card-time span,
.template-article .article.grid-item .article__card-time time,
.template-article .article.grid-item .article__card-time span {
  font-size: 13px !important;
  white-space: nowrap !important;
}

.template-blog .article.grid-item .article__card-author,
.template-article .article.grid-item .article__card-author {
  font-size: 16px !important;
}

}

.template-article [data-section-type="custom-content"] .hero__button,
.template-article [data-section-type="custom-content"] .btn--white.btn--solid {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}


/* Make Product Add to Cart match Product Card Add to Cart */
.template-product form[action="/cart/add"] button[name="add"]{
    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #FAF1E7 !important;
    border-radius:16px !important;

    background:transparent !important;
    color:#FAF1E7 !important;

    font-family:"Roc Grotesk" !important;
    font-size:18px !important;
    font-weight:700 !important;
    text-transform:uppercase;

    min-height:48px;
}

.template-product form[action="/cart/add"] button[name="add"] svg{
    stroke:#FAF1E7 !important;
    fill:none !important;
}


/* ==========================================
   CART - MOBILE CTA IMPROVEMENTS
   ========================================== */
@media screen and (max-width:749px){

  .cart__button-continue .cinema-blue-btn{
      width:auto !important;
      height:auto !important;
      background:none !important;
      border:none !important;
      color:rgba(250,241,231,.7) !important;
      font-family:"Univers Next Pro" !important;
      font-size:16px !important;
      font-weight:400 !important;
      text-decoration:underline;
      padding:0 !important;
      box-shadow:none !important;
      transform:none !important;
  }

  .cart__button-continue{
      display:flex;
      justify-content:center;
      margin-top:16px;
  }

  .cart__checkout{
      min-height:60px;
      font-size:18px;
      font-weight:700;
  }

  .template-product .product-title-price-row{
      display:flex !important;
      flex-direction:column !important;
      gap:16px !important;
  }

  .template-product .product-price-stack{
      display:flex !important;
      flex-direction:column !important;
      gap:16px !important;
      height:auto !important;
  }

  .template-product h1.product__title,
  .template-product .product-piece-count,
  .template-product .product__price > *{
      width:100% !important;
  }

}
.cart__button-continue .cinema-blue-btn{
      width:auto !important;
      height:auto !important;
      background:none !important;
      border:none !important;
      color:rgba(250,241,231,.7) !important;
      font-family:"Univers Next Pro" !important;
      font-size:16px !important;
      font-weight:400 !important;
      text-decoration:underline;
      padding:0 !important;
      box-shadow:none !important;
      transform:none !important;
      margin: 0 auto;
  }

/* Mobile Related Products Slider */
@media (max-width:749px){

  #product-recommendations .grid-item{
      flex:0 0 82% !important;
      max-width:82% !important;
  }

}

/* ==========================================
   PRODUCT CARD INFO - MOBILE
   ========================================== */
@media screen and (max-width:749px){

  .product-info-row{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
  }

  .product-info-left{
      justify-content:center;
      width:100%;
  }

  .product-item__price_holder{
      width:100%;
      text-align:center;
      margin:0;
  }

  .product-item__price{
      justify-content:center;
  }

    .product-information{
      gap:10px;
  }

  .product-info-row{
      gap:4px;
  }

  .product-card-atc{
      margin-top:12px;
  }

}
/* ============================================================
   RELATED PRODUCTS SLIDER — scoped to .related__wrapper
   (stable across theme copies, no section IDs)
   ============================================================ */

/* Desktop: 3 cards visible, arrows + drag + scroll snap */
@media (min-width: 1201px) {
  .related__wrapper .grid--slider {
    --gap: 20px;
    --item-width: calc((100% - (var(--gap) * 2)) / 3);
    padding-left: 115px !important;
    padding-right: 115px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 60px;
    scroll-padding-left: 115px;
  }
}

/* Tablet: 2 cards visible so it always overflows and scrolls */
@media (min-width: 801px) and (max-width: 1200px) {
  .related__wrapper .grid--slider {
    --gap: 20px;
    --item-width: calc((100% - var(--gap)) / 2);
    padding-left: 40px !important;
    padding-right: 40px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 48px;
    scroll-padding-left: 40px;
  }
}

/* Mobile: swipeable slider, one card + a peek of the next */
@media (max-width: 800px) {
  .related__wrapper .grid--slider {
    --gap: 16px;
    --item-width: 76vw;
    display: flex !important;
    flex-flow: row nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 40px;
    scroll-padding-left: 20px;
  }

  .related__wrapper .grid--slider .grid-item {
    flex: 0 0 var(--item-width) !important;
    max-width: var(--item-width) !important;
    width: auto !important;
    scroll-snap-align: start;
  }
}

/* ============================================================
   MOBILE CART — COMPACT LINE ITEMS
   Scoped to .cart__items so the cart drawer is untouched
   ============================================================ */
@media (max-width: 800px) {
  /* Row layout: thumbnail left, details right */
  .cart__items .cart__item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 20px !important;
    border: none !important;
    border-top: 1px solid rgba(250, 241, 231, 0.25) !important;
  }
  .cart__items .cart__item:first-child {
    border-top: none !important;
  }

  /* Thumbnail: 96px instead of full-width 375px */
  .cart__items .cart__item__image,
  .cart__items .cart__item__image a {
    width: 96px !important;
    max-width: 96px !important;
    min-width: 96px !important;
    min-height: 0 !important;
    flex: 0 0 96px !important;
    margin: 0 !important;
  }
  .cart__items .cart__item__image {
    margin-right: 16px !important;
  }
  .cart__items .cart__item__image img {
    border-radius: 8px;
  }

  /* Content column */
  .cart__items .cart__item__content {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  /* Kill the old 2-col grid; simple stacked flow */
  .cart__items .cart-line__main {
    display: block !important;
    height: auto !important;
  }
  .cart__items .cart-line__info {
    text-align: left !important;
    width: 100% !important;
  }

  .cart__items h4.cart__item__title {
    font-size: 18px !important;
    line-height: 120% !important;
    width: 100% !important;
    padding: 0 0 4px !important;
  }

  .cart__items .cart__item__content-inner .product-piece-count {
    font-size: 13px !important;
    margin-top: 2px !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  /* Price sits under the info, left-aligned */
  .cart__items .cart-line__price {
    margin-top: 6px !important;
    width: auto !important;
    justify-items: start !important;
    align-self: auto !important;
  }
  .cart__items .cart__price {
    font-size: 18px !important;
    text-align: left !important;
    padding-right: 0 !important;
  }

  /* Quantity + remove on one compact row */
  .cart__items .cart-line__quantity {
    width: 100% !important;
  }
  .cart__items .cart-line__quantity .cart__quantity-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  .cart__items .cart__quantity-counter {
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  .cart__items .cart__quantity {
    width: 110px !important;
  }
  .cart__items .cart__quantity-field {
    font-size: 15px !important;
  }
  .cart__items .cart__item__remove {
    padding: 0 !important;
    font-size: 13px !important;
  }
}
/* Hide the Update Cart button (theme's no-JS fallback; quantities update via AJAX) */
body.template-cart button[name="update"].cart__checkout {
  display: none !important;
}