/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

@charset "UTF-8";
/*------------------------------------------------------------------
[Table of contents]

1. Body
	2. Header 
		2.1. Navigation 
		2.2. Menu 
		2.3. Cart 
	3. Banner
		3.1 Revolution Slider
	4. Products
		4.1 Product Item
		4.2 Single Product
	5. Pricing
	6. Clients
	7. Instagram Feed 
	8. User Dashboard
		8.1 User Profile
	9. Blog
		9.1 Post
		9.2 Post Pagination
		9.3 Single Post
		9.4 Post Sidebar
	10. Backgrounds
	11. Comming Soon
	12. Account Page
	13. Shopping
		13.1 Checkout
		13.2 Shopping Cart
		13.3 Product Checkout Details
		13.4 Purchase Confirmation
		13.5 Empty Cart
		13.6 Success Message
	14.404 Page
	15. Contact 
		15.1  Contact Form 
		15.2 Contact Details
		15.3 Social Icons
	16.Footer


-------------------------------------------------------------------*/
/* font imports */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto+Mono:wght@400;500;600;700&display=swap");

:root {
  /* colors */
  --color-primary: #1f2525;   /* #1d1b1b; */
  --color-background: #fff5e9;
  --color-white: #ffffff;
  --color-accent-yellow: #ce2029;
  --color-accent-red: #ce2029;

  --color-text-primary: #1d1b1b;
  --color-text-secondary: rgba(29, 27, 27, 0.65);
  --color-text-muted: rgba(29, 27, 27, 0.45);
  --color-text-light: #fff5e9;

  --color-border: rgba(29, 27, 27, 0.1);
  --color-border-strong: rgba(29, 27, 27, 0.2);

  /* typefaces */
  --font-primary: "Instrument Sans", sans-serif;
  --font-mono: "Roboto Mono", monospace;

  /* font sizes — desktop defaults, overridden in mobile media query */
  --text-h1: 30px;
  --text-h2: 20px;
  --text-h3: 16px;
  --text-section-mono: 11px;
  --text-body: 15px;
  --text-body-sm: 13px;
  --text-nav: 22px;
  --text-btn-primary: 14px;
  --text-btn-secondary: 14px;
  --text-price-lg: 22px;
  --text-price-sm: 15px;
  --text-format: 11px;
  --text-meta: 13px;
  --text-badge: 10px;
  --text-breadcrumb: 13px;
  --text-footer-title: 13px;
  --text-footer-link: 12px;
  --text-footer-copy: 11px;
  --text-spec-label: 11px;
  --text-campaign-badge: 10px;

  /* line heights */
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-normal: 1.5;
  --lh-body: 1.7;

  /* letter spacing */
  --ls-tight: -0.5px;
  --ls-normal: 0;
  --ls-wide: 0.5px;
  --ls-wider: 1px;
  --ls-widest: 2px;

  /* font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* spacing — desktop defaults */
  --spacing-page-x: 24px;
  --spacing-page-y: 32px;

  --spacing-section-gap: 0px;
  --spacing-section-padding-y: 32px;
  --spacing-section-padding-x: 24px;

  --spacing-component-gap: 12px;
  --spacing-component-gap-sm: 6px;
  --spacing-component-gap-lg: 16px;

  --spacing-grid-gap: 12px;
  --spacing-grid-gap-sm: 3px;

  --spacing-card-padding: 16px;
  --spacing-card-padding-sm: 12px;

  --spacing-btn-padding-y: 12px;
  --spacing-btn-padding-x: 28px;
  --spacing-btn-padding-y-sm: 5px;
  --spacing-btn-padding-x-sm: 14px;

  --height-header: 62px;
  --height-search: 46px;

  /* border radius */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* borders */
  --border-thin: 1px solid var(--color-border);
  --border-medium: 1.5px solid var(--color-border-strong);
  --border-card: 1px solid rgba(29, 27, 27, 0.08);

  /* legacy aliases — keeps old variable names working */
  --color-dark: var(--color-primary);
  --color-bg-light: var(--color-background);
  --color-yellow: var(--color-accent-yellow);
  --color-red: var(--color-accent-red);
  --component-gap: var(--spacing-component-gap);
}

/* mobile token overrides */
@media (max-width: 768px) {
  :root {
    --text-h1: 24px;
    --text-h2: 18px;
    --text-h3: 15px;
    --text-section-mono: 10px;
    --text-body: 15px;
    --text-body-sm: 13px;
    --text-nav: 12px;
    --text-btn-primary: 13px;
    --text-btn-secondary: 13px;
    --text-price-lg: 18px;
    --text-price-sm: 14px;
    --text-format: 10px;
    --text-meta: 12px;
    --text-badge: 10px;
    --text-breadcrumb: 12px;
    --text-footer-title: 12px;
    --text-footer-link: 12px;
    --text-footer-copy: 10px;

    --spacing-page-x: 16px;
    --spacing-page-y: 20px;
    --spacing-section-padding-y: 20px;
    --spacing-section-padding-x: 16px;
    --spacing-component-gap: 10px;
    --spacing-grid-gap: 8px;
    --spacing-card-padding: 12px;
    --spacing-btn-padding-y: 10px;
    --spacing-btn-padding-x: 20px;

    --height-header: 80px;
  }
}

body {
  line-height: 1.7;
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  color: var(--color-dark);
}

p {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

iframe {
  border: 0;
}

a,
a:focus,
a:hover {
  text-decoration: none;
  outline: 0;
  color: var(--color-dark);
}

blockquote {
  font-size: 18px;
  border-color: #000;
  padding: 20px 40px;
  text-align: left;
  color: #777;
}

.navbar-toggle .icon-bar {
  background: #000;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"] {
  border-radius: var(--radius-md);
  box-shadow: none;
  height: 45px;
  outline: none;
  font-weight: 200;
  font-size: 12px;
}
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus {
  box-shadow: none;
  border: 1px solid #000;
}

.form-control {
  box-shadow: none;
  border-radius: var(--radius-md);
}
.form-control:focus {
  box-shadow: none;
  border: 1px solid var(--color-primary);
}

/* --- Button system --- */
.btn.btn-primary,
.btn-primary,
.btn-main {
  background: var(--color-primary);
  color: var(--color-text-light);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-btn-primary);
  font-weight: var(--fw-semibold);
  padding: var(--spacing-btn-padding-y) var(--spacing-btn-padding-x);
  text-transform: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn-primary:hover,
.btn-main:hover {
  background: var(--color-primary);
  color: var(--color-text-light);
  opacity: 0.85;
}
.btn-primary.btn-icon i,
.btn-main.btn-icon i {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 5px;
}

.btn.btn-secondary,
.btn-secondary,
.btn-solid-border {
  background: transparent;
  color: var(--color-text-primary);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-btn-secondary);
  font-weight: var(--fw-semibold);
  padding: var(--spacing-btn-padding-y) var(--spacing-btn-padding-x);
  text-transform: none;
  border: var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s;
}
.btn.btn-secondary:hover,
.btn-secondary:hover,
.btn-solid-border:hover {
  border-color: var(--color-primary);
  background: transparent;
  color: var(--color-text-primary);
}

.btn.btn-outline,
.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-btn-primary);
  font-weight: var(--fw-semibold);
  padding: var(--spacing-btn-padding-y) var(--spacing-btn-padding-x);
  text-transform: none;
  border: var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.btn.btn-outline:hover,
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.btn-transparent {
  background: transparent;
  padding: 0;
  color: var(--color-dark);
  font-family: var(--font-mono);
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.btn-transparent:hover {
  background: transparent;
  color: var(--color-dark);
}

.btn-small {
  padding: 6px 16px;
  font-size: 12px;
}

.btn-large {
  padding: 14px 40px;
  font-size: 15px;
}
.btn-large.btn-icon i {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 5px;
}

.btn-round {
  border-radius: var(--radius-lg);
}

.btn-round-full {
  border-radius: var(--radius-pill);
}

.btn.active:focus,
.btn:active:focus,
.btn:focus {
  outline: 0;
}

.mt-10 {
  margin-top: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.btn:focus {
  color: #ddd;
}

.w-100 {
  width: 100%;
}

.margin-0 {
  margin: 0 !important;
}

#preloader {
  background: #fff;
  height: 100%;
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 999999999;
}

.bg-shadow {
  background-color: #fff;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.bg-gray {
  background: var(--color-bg-light);
}

.section {
  padding: var(--spacing-section-padding-y) var(--spacing-section-padding-x);
}

.title {
  padding: 20px 0 30px;
}
.title h2 {
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.category-box {
  background-size: cover;
  margin-bottom: 30px;
  min-height: 350px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 400px) {
  .category-box {
    min-height: 250px;
  }
}
@media (max-width: 480px) {
  .category-box {
    min-height: 250px;
  }
}
.category-box.category-box-2 {
  min-height: 730px;
}
@media (max-width: 768px) {
  .category-box.category-box-2 {
    min-height: 400px;
  }
}
.category-box:hover img {
  transform: scale(1.1);
}
.category-box img {
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.category-box a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.category-box .content {
  position: absolute;
  z-index: 999;
  top: 0;
  padding: 25px;
}
@media (max-width: 768px) {
  .category-box .content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}
.category-box .content h3 {
  margin: 0;
  color: #333;
  font-size: 20px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .category-box .content h3 {
    font-size: 20px;
  }
}
.category-box .content p {
  margin: 6px 0 0;
}

.page-header {
  background: #f5f5f5;
  margin-top: 20px;
  border-bottom: none;
  padding: 30px 0;
}
.page-header h1 {
  font-weight: 200;
  margin: 0 0 6px 0;
}
.page-header .breadcrumb {
  background: transparent;
  padding: 5px;
  margin: 0;
}
.page-header .breadcrumb li {
  font-weight: 200;
  font-size: 12px;
}
.page-header .breadcrumb li a {
  color: #000;
}

.overly {
  position: relative;
}
.overly:before {
  content: "";
  background: rgba(0, 0, 0, 0.51);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.overly-white {
  position: relative;
}
.overly-white:before {
  content: "";
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-wrapper {
  padding: var(--section-padding);
}

.social-media-icons ul li {
  display: inline-block;
}
.social-media-icons ul li a {
  font-size: 18px;
  color: #333;
  display: inline-block;
  padding: 7px 12px;
  color: #fff;
}
.social-media-icons ul li .twitter {
  background: #00aced;
}
.social-media-icons ul li .facebook {
  background: #3b5998;
  padding: 7px 18px;
}
.social-media-icons ul li .googleplus {
  background: #dd4b39;
}
.social-media-icons ul li .dribbble {
  background: #ea4c89;
}
.social-media-icons ul li .instagram {
  background: #bc2a8d;
}

@media (max-width: 480px) {
  .call-to-action .subscription-form {
    display: block;
  }
}
.call-to-action .subscription-form input {
  height: 50px;
}
@media (max-width: 480px) {
  .call-to-action .subscription-form input {
    text-align: center;
  }
}
.call-to-action .subscription-form .btn-main,
.call-to-action .subscription-form .btn-solid-border,
.call-to-action .subscription-form .btn-transparent,
.call-to-action .subscription-form .btn-small {
  font-size: 14px;
}
@media (max-width: 480px) {
  .call-to-action .subscription-form .btn-main,
  .call-to-action .subscription-form .btn-solid-border,
  .call-to-action .subscription-form .btn-transparent,
  .call-to-action .subscription-form .btn-small {
    width: 100%;
  }
}

.dropdown-slide {
  position: static;
}
.dropdown-slide .open > a,
.dropdown-slide .open > a:focus,
.dropdown-slide .open > a:hover {
  background: transparent;
}
.dropdown-slide.full-width .dropdown-menu {
  left: 0;
  right: 0;
}
.dropdown-slide:hover .dropdown-menu {
  display: none;
  opacity: 1;
  display: block;
  transform: translate(0px, 0px);
  opacity: 1;
  visibility: visible;
  color: #777;
  transform: translateY(0px);
}
.dropdown-slide .dropdown-menu {
  border-radius: 0;
  opacity: 1;
  visibility: visible;
  position: absolute;
  padding: 15px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: 0.3s all;
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition:
    visibility 0.2s,
    opacity 0.2s,
    transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
}
@media (max-width: 480px) {
  .dropdown-slide .dropdown-menu {
    transform: none;
  }
}

.commonSelect {
  margin-left: 10px;
  padding-right: 6px;
  position: relative;
}
.commonSelect:before {
  content: "\f3d0";
  font-family: "themefisher-font";
  position: absolute;
  right: -4px;
  top: 4px;
  font-size: 10px;
}
.commonSelect select {
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  border: none;
  padding: 0;
  height: auto;
  color: #555;
}
.commonSelect select:focus {
  box-shadow: none;
  border: none;
}

.tabCommon .nav-tabs {
  border-bottom: 0;
  margin-bottom: 10px;
}
.tabCommon .nav-tabs li {
  margin-right: 5px;
}
.tabCommon .nav-tabs li.active a {
  background-color: #000;
  border: 1px solid #000;
  color: #ffffff;
}
.tabCommon .nav-tabs a {
  border-radius: 0;
  background: #f9f9f9;
}
.tabCommon .nav-tabs a:hover {
  border: 1px solid transparent;
  background: #000;
  color: #fff;
}
.tabCommon .tab-content {
  padding: 20px;
  border: 1px solid #dedede;
}

.commonAccordion .panel,
.commonAccordion-2 .panel {
  border-radius: 0;
  box-shadow: none;
}
.commonAccordion .panel .panel-heading,
.commonAccordion-2 .panel .panel-heading {
  background: transparent;
  padding: 0;
}
.commonAccordion .panel .panel-title,
.commonAccordion-2 .panel .panel-title {
  position: relative;
}
.commonAccordion .panel .panel-title a,
.commonAccordion-2 .panel .panel-title a {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  padding: 10px 10px;
}
.commonAccordion .panel .panel-title a:before,
.commonAccordion-2 .panel .panel-title a:before {
  color: #555;
  content: "\f209";
  position: absolute;
  right: 25px;
  font-family: "themefisher-font";
}
.commonAccordion .panel .panel-title a.collapsed:before,
.commonAccordion-2 .panel .panel-title a.collapsed:before {
  content: "\f217";
}

.list-circle {
  padding-left: 20px;
}
.list-circle li {
  list-style-type: circle;
}

.play-icon {
  border: 1px solid #dedede;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  font-size: 30px;
}
.play-icon i {
  line-height: 60px;
}

.alert-common {
  border-radius: 0;
  border-width: 2px;
}
.alert-common i {
  margin: 0 5px;
  font-size: 16px;
}

.alert-solid {
  background: transparent;
  color: #000;
}

@media (max-width: 480px) {
  .buttonPart li {
    margin-bottom: 8px;
  }
}
@media (max-width: 768px) {
  .buttonPart li {
    margin-bottom: 8px;
  }
}

.single-page-header {
  padding: 140px 0 70px;
  text-align: center;
  color: #fff;
  position: relative;
}

.top-header {
  background: var(--color-yellow);
}

.top-header .container {
  padding-top: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(29, 27, 27, 0.12);
}
.top-header .dropdown-menu {
  left: auto;
  right: 0;
  max-width: 300px;
}
@media (max-width: 480px) {
  .top-header .dropdown-menu {
    right: 0;
    left: 0;
    max-width: 100%;
  }
}
.top-header .contact-number {
  font-size: 12px;
  color: #333;
}
@media (max-width: 480px) {
  .top-header .contact-number {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .top-header .contact-number {
    text-align: center;
    padding: 10px 0;
  }
}
.top-header .contact-number i {
  margin-right: 4px;
  font-size: 18px;
  vertical-align: middle;
}
@media (max-width: 768px) {
  .top-header .top-menu {
    text-align: center;
    padding: 10px 0;
  }
}
.top-header .top-menu > li > a {
  color: #333;
  font-size: 15px;
  padding: 0 8px;
}
.top-header .top-menu > li > a:hover,
.top-header .top-menu > li > a:focus {
  background: transparent;
}
.top-header .top-menu > li > a i {
  font-size: 16px;
  margin-right: 2px;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .top-header .logo {
    padding: 10px;
  }
}
@media (max-width: 768px) {
  .top-header .logo {
    padding: 10px;
  }
}
.top-header .logo a {
  display: inline-block;
}

.cart-dropdown .media {
  position: relative;
  border-bottom: 1px solid #dedede;
  padding-bottom: 15px;
}
.cart-dropdown .media .pull-left {
  padding-right: 15px;
}
.cart-dropdown img {
  width: 60px;
}
.cart-dropdown h4 {
  color: #000;
  font-weight: 300;
  font-size: 14px;
}
.cart-dropdown .cart-price {
  color: #7f7f7f;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.cart-dropdown .remove {
  padding: 1px 6px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #f7f8f9;
  color: #7f7f7f;
  font-size: 12px;
}

.cart-buttons {
  margin-top: 20px;
}
.cart-buttons li {
  display: inline-block;
  width: 49%;
}
.cart-buttons li a {
  display: block;
}

.cart-summary {
  margin-top: 10px;
  font-weight: 500;
  color: #000;
  font-size: 14px;
}
.cart-summary .total-price {
  float: right;
}

.navigation {
  margin-bottom: 0;
  padding: 10px 0;
  background: var(--color-yellow);
}
.navigation .menu-title {
  display: none;
  font-size: 16px;
}
@media (max-width: 480px) {
  .navigation .menu-title {
    display: inline-block;
    padding-left: 10px;
  }
}
@media (max-width: 768px) {
  .navigation .menu-title {
    display: inline-block;
    padding-left: 10px;
  }
}
.navigation .navbar-nav > li {
  position: static;
}
.navigation .navbar-nav > li.active a {
  color: #000;
}
.navigation .navbar-nav > li > a {
  color: #333;
  font-size: 14px;
  padding: 20px 15px;
  text-transform: uppercase;
  transition: 0.2s ease-in-out 0s;
  border: 1px solid transparent;
}
.navigation .navbar-nav > li > a:hover,
.navigation .navbar-nav > li > a:active,
.navigation .navbar-nav > li > a:focus {
  background: none;
  color: #000;
}
.navigation .container {
  position: relative;
}
.navigation .nav .open > a {
  border: 1px solid transparent;
  background-color: transparent;
}
.navigation .navbar-nav {
  float: none;
  display: inline-block;
}
.navigation .dropdown-slide .dropdown-menu {
  right: auto;
  left: auto;
  border: none;
}
.navigation .dropdown-slide .dropdown-menu li a {
  color: #222;
  font-size: 12px;
  border: 1px solid transparent;
  display: block;
  padding: 8px 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: 0.3s all;
}
.navigation .dropdown-slide .dropdown-menu li a:hover {
  background-color: #000;
  color: #fff;
}

.slider-item {
  text-align: center;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.slider-item::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: -1;
  top: 0;
  left: 0;
}
.slider-item .container {
  position: relative;
  display: table;
  max-width: 1170px;
  height: 100%;
}
.slider-item .slide-inner {
  transform: translate(0, -30%);
  top: 50%;
  left: 0;
  right: 0;
  position: absolute;
}
.slider-item h1 {
  color: #fff;
  font-weight: bold;
  font-size: 60px;
}
.slider-item p {
  color: #fff;
}
.slider-item .btn-main,
.slider-item .btn-solid-border,
.slider-item .btn-transparent,
.slider-item .btn-small {
  margin-top: 25px;
}
.slider-item.white-bg .slide-inner h1 {
  color: #000;
}
.slider-item.white-bg .slide-inner p {
  color: #000;
}

.home-slider:hover .owl-nav {
  opacity: 1;
}
.home-slider .owl-nav {
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  right: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.home-slider .owl-nav .owl-next,
.home-slider .owl-nav .owl-prev {
  width: 60px;
  height: 60px;
  display: inline-block;
  background: #fff;
  text-align: center;
}
.home-slider .owl-nav .owl-next {
  right: 0px;
  position: absolute;
}
.home-slider .owl-nav i {
  line-height: 60px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.54);
}

.hero-slider .slider-item .container {
  height: 600px;
}
.hero-slider .slider-item .container .row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slider .slider-item:focus {
  outline: 0;
}
.hero-slider .btn {
  font-size: 15px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  letter-spacing: 1px;
  font-family: var(--font-primary);
  border-color: rgb(255, 255, 255);
  border-style: solid;
  border-width: 2px;
  outline: none;
  box-shadow: rgb(153, 153, 153) 0px 0px 0px 0px;
  box-sizing: border-box;
  padding: 12px 26px;
  opacity: 1;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform-origin: 50% 50% 0px;
  border-radius: 0;
  transition: 0.3s;
}
.hero-slider .btn:hover {
  color: black;
  background-color: #fff;
}
.hero-slider h1 {
  white-space: normal;
  font-size: 49px;
  line-height: 49px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  letter-spacing: -2px;
  font-family: var(--font-primary);
  margin-bottom: 35px;
}

.heroSliderArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 0;
  background-color: #fff;
  font-size: 16px;
  transition: 0.3s;
  z-index: 999;
}
.heroSliderArrow:focus,
.heroSliderArrow:hover {
  background-color: #000;
  color: #fff;
  outline: 0;
}
.heroSliderArrow.prevArrow {
  left: 20px;
}
.heroSliderArrow.nextArrow {
  right: 20px;
}
@media (max-width: 768px) {
  .heroSliderArrow {
    display: none;
  }
}

.product-item {
  margin-bottom: var(--component-gap);
  background: var(--color-white);
  border: 1px solid rgba(29, 27, 27, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.product-item .product-thumb {
  position: relative;
}
.product-item .product-thumb img {
  width: 100%;
  height: auto;
}
.product-item .product-thumb .bage {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-dark);
  color: var(--color-bg-light);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  display: inline-block;
}
.product-item .product-thumb:before {
  transition: 0.3s all;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.product-item .product-thumb .preview-meta {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  opacity: 0;
  transition: 0.2s;
  transform: translateY(10px);
}
.product-item .product-thumb .preview-meta li {
  display: inline-block;
}
.product-item .product-thumb .preview-meta li a,
.product-item .product-thumb .preview-meta li span {
  background: #fff;
  padding: 10px 0px;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  transition: 0.2s all;
  width: 50px;
}
.product-item .product-thumb .preview-meta li a:hover,
.product-item .product-thumb .preview-meta li span:hover {
  background: #000;
  color: #fff;
}
.product-item:hover .product-thumb:before {
  opacity: 1;
}
.product-item:hover .preview-meta {
  opacity: 1;
  transform: translateY(-20px);
}
.product-item .product-content {
  text-align: center;
}
.product-item .product-content h4 {
  font-size: 16px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 6px;
}
.product-item .product-content h4 a {
  color: #000;
}

.modal .product-modal {
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 0;
}
.product-modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.product-modal.fade .modal-dialog {
  transform: translate(0, 0);
}
.product-modal .close {
  width: 50px;
  float: none;
  position: absolute;
  right: 20px;
  z-index: 9;
  top: 20px;
  font-size: 30px;
  outline: none;
}
.product-modal .modal-dialog {
  width: 900px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .product-modal .modal-dialog {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .product-modal .modal-dialog {
    width: 100%;
  }
}
.product-modal .modal-content {
  border-radius: 0;
  box-shadow: none;
  border: none;
}
.product-modal .modal-content .modal-body {
  padding: 30px;
}
.product-modal .modal-content .modal-body .modal-image img {
  width: 100%;
  height: auto;
}
.product-modal .modal-content .modal-body .product-short-details h2 {
  margin-top: 0;
  font-size: 22px;
  font-weight: 400;
}
.product-modal .modal-content .modal-body .product-short-details h2 a {
  color: #000;
}
@media (max-width: 480px) {
  .product-modal .modal-content .modal-body .product-short-details h2 {
    margin-top: 15px;
  }
}
@media (max-width: 768px) {
  .product-modal .modal-content .modal-body .product-short-details h2 {
    margin-top: 15px;
  }
}
.product-modal
  .modal-content
  .modal-body
  .product-short-details
  .product-price {
  font-size: 30px;
  margin: 20px 0;
  font-family: var(--font-mono);
  font-weight: 600;
}
@media (max-width: 480px) {
  .product-modal
    .modal-content
    .modal-body
    .product-short-details
    .product-price {
    margin: 10px 0;
  }
}
.product-modal .modal-content .modal-body .product-short-details .btn-main,
.product-modal
  .modal-content
  .modal-body
  .product-short-details
  .btn-solid-border,
.product-modal
  .modal-content
  .modal-body
  .product-short-details
  .btn-transparent,
.product-modal .modal-content .modal-body .product-short-details .btn-small {
  margin-top: 20px;
}
.product-modal
  .modal-content
  .modal-body
  .product-short-details
  .btn-transparent {
  color: #444;
  border-bottom: 1px solid #dedede;
}

.product-shorting {
  margin-bottom: 30px;
}
.product-shorting span {
  margin-right: 15px;
}

.product-category ul {
  padding-left: 15px;
}
.product-category ul li {
  margin-bottom: 4px;
}
.product-category ul li a {
  color: #666;
}
.product-category ul li a:hover {
  color: #000;
}

.single-product {
  padding: 60px 0 40px;
}
.single-product .breadcrumb {
  background: transparent;
}
.single-product .breadcrumb li {
  color: #000;
  font-weight: 200;
}
.single-product .breadcrumb li a {
  color: #000;
  font-weight: 200;
}
.single-product .product-pagination li {
  display: inline-block;
  margin: 0 8px;
}
.single-product .product-pagination li + li:before {
  padding: 0 8px 0 0;
  color: #ccc;
  content: "/ ";
}
.single-product .product-pagination li a {
  color: #000;
  font-weight: 200;
}
.single-product .product-pagination li a i {
  vertical-align: middle;
}

.single-product-slider .carousel .carousel-inner .carousel-caption {
  text-shadow: none;
  text-align: left;
  top: 20%;
  bottom: auto;
}
.single-product-slider .carousel .carousel-inner .carousel-caption h1 {
  font-size: 50px;
  font-weight: 100;
  color: #000;
}
.single-product-slider .carousel .carousel-inner .carousel-caption p {
  width: 50%;
  font-weight: 200;
}
.single-product-slider .carousel .carousel-inner .carousel-caption .btn-main,
.single-product-slider
  .carousel
  .carousel-inner
  .carousel-caption
  .btn-solid-border,
.single-product-slider
  .carousel
  .carousel-inner
  .carousel-caption
  .btn-transparent,
.single-product-slider .carousel .carousel-inner .carousel-caption .btn-small {
  margin-top: 20px;
}
.single-product-slider .carousel .carousel-control {
  bottom: auto;
  background: #fff;
  width: 6%;
  padding: 10px 0;
}
.single-product-slider .carousel .carousel-control i {
  font-size: 40px;
  text-shadow: none;
  color: #555;
}
.single-product-slider .carousel .carousel-indicators li img {
  height: auto;
  width: 60px;
}
.single-product-slider .carousel .carousel-control.right,
.single-product-slider .carousel .carousel-control.left {
  background-image: none;
  top: 40%;
}

.single-product-slider .carousel-indicators {
  margin: 10px 0 0;
  overflow: auto;
  position: static;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}
.single-product-slider .carousel-indicators li {
  background-color: transparent;
  border-radius: 0;
  display: inline-block;
  height: auto;
  margin: 0;
  width: auto;
}
.single-product-slider .carousel-indicators li.active img {
  opacity: 1;
}
.single-product-slider .carousel-indicators li:hover img {
  opacity: 0.75;
}
.single-product-slider .carousel-indicators li img {
  display: block;
  opacity: 0.5;
}

.single-product-details .color-swatches {
  display: flex;
  align-items: center;
}
.single-product-details .color-swatches span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
}
.single-product-details .color-swatches a {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 5px;
}
.single-product-details .color-swatches li {
  display: inline-block;
}
.single-product-details .color-swatches .swatch-violet {
  background-color: #8da1cd;
}
.single-product-details .color-swatches .swatch-black {
  background-color: #000;
}
.single-product-details .color-swatches .swatch-cream {
  background-color: #e6e2d6;
}
.single-product-details .product-size {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.single-product-details .product-size span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
.single-product-details .product-size .form-control {
  display: inline-block;
  width: 130px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  font-size: 12px;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-md);
  box-shadow: none;
}
.single-product-details .product-category {
  margin-top: 20px;
}
.single-product-details .product-category > span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
.single-product-details .product-category ul {
  width: 140px;
  display: inline-block;
}
.single-product-details .product-category ul li {
  display: inline-block;
  margin: 5px;
}
.single-product-details .product-quantity {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.single-product-details .product-quantity > span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
.single-product-details .product-quantity .product-quantity-slider {
  width: 140px;
  display: inline-block;
}
.single-product-details .product-quantity .product-quantity-slider input {
  height: 34px;
}
.single-product-details
  .product-quantity
  .product-quantity-slider
  .input-group-btn:first-child
  > .btn,
.single-product-details
  .product-quantity
  .product-quantity-slider
  .p-quantity
  .input-group-btn:first-child
  > .btn-group {
  margin-right: -2px;
}
.single-product-details .product-quantity .product-quantity-slider button {
  border-radius: 0;
}

.bootstrap-touchspin .input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}

.bootstrap-touchspin .input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  margin-left: -1px;
  position: relative;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
  border-radius: 0;
  border-top-right-radius: 4px;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
  margin-top: -2px;
  border-radius: 0;
  border-bottom-right-radius: 4px;
}

.bootstrap-touchspin .input-group-btn-vertical i {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 9px;
  font-weight: normal;
}

/* pricing section */
.pricing-table .pricing-item {
  padding: 40px 55px 65px;
  background: #fff;
  margin-bottom: 20px;
}
.pricing-table .pricing-item a.btn-main,
.pricing-table .pricing-item a.btn-solid-border,
.pricing-table .pricing-item a.btn-transparent,
.pricing-table .pricing-item a.btn-small {
  text-transform: uppercase;
  margin-top: 20px;
}
.pricing-table .pricing-item li {
  font-weight: 400;
  padding: 10px 0;
  color: #666;
}
.pricing-table .pricing-item li i {
  margin-right: 6px;
}
.pricing-table .price-title {
  padding: 30px 0 20px;
}
.pricing-table .price-title > h3 {
  font-weight: 700;
  margin: 0 0 5px;
  font-size: 15px;
  text-transform: uppercase;
}
.pricing-table .price-title > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 5px;
}
.pricing-table .price-title .value {
  color: #000;
  font-size: 50px;
  padding: 10px 0;
}

.instagram-feed {
  text-align: center;
}
.instagram-feed a {
  margin: 6px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.instagram-feed a:hover img {
  filter: grayscale(10);
}
.instagram-feed a img {
  width: 100%;
  max-height: 180px;
  -o-object-fit: cover;
  object-fit: cover;
}

.dashboard-menu .active {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.dashboard-menu li {
  padding: 0;
  margin: 0 3px;
}
.dashboard-menu li a {
  padding: 10px 20px;
  border: 1px solid #dedede;
  display: inline-block;
}
@media (max-width: 768px) {
  .dashboard-menu li a {
    padding: 10px 15px;
  }
}
@media (max-width: 480px) {
  .dashboard-menu li a {
    padding: 10px 5px;
  }
}
@media (max-width: 400px) {
  .dashboard-menu li a {
    padding: 10px 8px;
    font-size: 12px;
    margin-bottom: 6px;
  }
}

.dashboard-wrapper {
  border: 1px solid #dedede;
  margin-top: 30px;
  padding: 20px;
}
.dashboard-wrapper h2 {
  font-size: 18px;
}
.dashboard-wrapper h4 {
  font-size: 16px;
}
.dashboard-wrapper .user-img {
  width: 120px;
  border-radius: 100px;
}

.dashboard-user-profile .user-img {
  width: 180px;
}
.dashboard-user-profile .user-profile-list {
  margin-top: 30px;
  padding-left: 30px;
}
.dashboard-user-profile .user-profile-list li {
  margin-bottom: 8px;
}
.dashboard-user-profile .user-profile-list span {
  font-weight: bold;
  margin-right: 5px;
  width: 100px;
  display: inline-block;
}

/* blog / latest posts */
.blog {
  background: #f6f6f6;
}

.post {
  background: #fff;
  margin-bottom: 40px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 20px;
}
.post .post-media.post-thumb img {
  width: 100%;
  height: auto;
}
.post .post-media.post-media-audio iframe {
  width: 100%;
}
.post .post-title {
  font-size: 20px;
  margin-top: 10px;
  margin: 25px 0 0;
  padding: 0 20px 5px;
  font-weight: 300;
}
.post .post-title a {
  color: #000;
}
.post .post-title a:hover {
  color: #000;
}
.post .post-meta {
  font-size: 13px;
  margin-top: 5px;
  padding: 0 20px 5px;
}
.post .post-meta ul li {
  display: inline-block;
  color: #5f5b5b;
  margin-right: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 200;
}
.post .post-meta ul li a {
  color: #5f5b5b;
}
.post .post-meta ul li a:hover {
  color: #000;
}
.post .post-meta .post-author {
  color: #000;
}
.post .post-content {
  padding: 5px 20px;
}
.post .post-content p {
  color: #444;
  font-size: 14px;
  margin: 10px 0;
}
.post .post-content .btn-main,
.post .post-content .btn-solid-border,
.post .post-content .btn-transparent,
.post .post-content .btn-small {
  padding: 10px 20px;
  margin: 15px 0;
  font-size: 10px;
}

.post-pagination {
  margin-top: 70px;
}
.post-pagination > li {
  margin: 0 2px;
  display: inline-block;
  font-size: 12px;
}
.post-pagination > li > a {
  color: #000;
}
.post-pagination > li > a:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}
.post-pagination > li.active > a {
  background: #000;
  border: 1px solid #000;
}
.post-pagination > li:first-child > a,
.post-pagination > li:last-child > a {
  border-radius: 0;
}

/* single blog post page */
.post.post-single {
  border: none;
}

.post-sub-heading {
  border-bottom: 1px solid #dedede;
  padding-bottom: 20px;
  letter-spacing: 2px;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 20px;
}

.post-social-share {
  margin-bottom: 50px;
}

.post-comments {
  margin: 30px 0;
}
.post-comments .media {
  margin-top: 15px;
}
.post-comments .media > .pull-left {
  padding-right: 20px;
}
.post-comments .comment-author {
  margin-top: 0;
  margin-bottom: 3px;
}
.post-comments .comment-author a {
  color: #000;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}
.post-comments p {
  margin-bottom: 30px;
  font-size: 14px;
}
.post-comments time {
  margin: 0 0 5px;
  display: inline-block;
  color: #7e7e7e;
  font-size: 12px;
  font-weight: 200;
}
.post-comments .comment-button {
  color: #7e7e7e;
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
}
.post-comments .comment-button i {
  margin-right: 5px;
  display: inline-block;
}
.post-comments .comment-button:hover {
  color: #000;
}

.post-excerpt {
  padding: 0 20px;
  margin-bottom: 60px;
}
.post-excerpt h3 a {
  color: #000;
}
.post-excerpt blockquote {
  line-height: 22px;
  margin: 20px 0;
  font-size: 16px;
}
.post-excerpt p {
  font-size: 16px;
  color: #5e5e5e;
  margin: 0 0 30px;
  line-height: 30px;
}

.single-blog {
  background-color: #fff;
  margin-bottom: 50px;
  padding: 20px;
}

.blog-subtitle {
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.next-prev {
  border-bottom: 1px solid #dedede;
  border-top: 1px solid #dedede;
  margin: 20px 0;
  padding: 25px 0;
}
.next-prev a {
  color: #000;
}
.next-prev a:hover {
  color: #000;
}
.next-prev .prev-post i {
  margin-right: 10px;
}
.next-prev .next-post i {
  margin-left: 10px;
}

.social-profile ul li {
  margin: 0 10px 0 0;
  display: inline-block;
}
.social-profile ul li a {
  color: #4e595f;
  display: block;
  font-size: 16px;
}
.social-profile ul li a i:hover {
  color: #000;
}

.comments-section {
  margin-top: 35px;
}

.author-about {
  margin-top: 40px;
}

.post-author {
  margin-right: 20px;
}

.post-author > img {
  border: 1px solid #dedede;
  max-width: 120px;
  padding: 5px;
  width: 100%;
}

.comment-list ul {
  margin-top: 20px;
}
.comment-list ul li {
  margin-bottom: 20px;
}

.comment-wrap {
  border: 1px solid #dedede;
  border-radius: 1px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
}
.comment-wrap .author-avatar {
  margin-right: 10px;
}
.comment-wrap .media .media-heading {
  font-size: 14px;
  margin-bottom: 8px;
}
.comment-wrap .media .media-heading a {
  color: #000;
  font-size: 13px;
}
.comment-wrap .media .comment-meta {
  font-size: 12px;
  color: #888;
}
.comment-wrap .media p {
  margin-top: 15px;
}

.comment-reply-form {
  margin-top: 80px;
}
.comment-reply-form input,
.comment-reply-form textarea {
  height: 35px;
  border-radius: var(--radius-md);
  box-shadow: none;
}
.comment-reply-form input:focus,
.comment-reply-form textarea:focus {
  box-shadow: none;
  border: 1px solid #000;
}
.comment-reply-form textarea,
.comment-reply-form .btn-main,
.comment-reply-form .btn-solid-border,
.comment-reply-form .btn-transparent,
.comment-reply-form .btn-small {
  height: auto;
}

.widget {
  margin-bottom: 30px;
  padding-bottom: 35px;
}
.widget .widget-title {
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.widget.widget-subscription .form-group {
  margin-bottom: 8px;
}
.widget.widget-subscription .form-group input {
  font-size: 12px;
  font-weight: 200;
  height: 45px;
}
.widget.widget-subscription .btn-main,
.widget.widget-subscription .btn-solid-border,
.widget.widget-subscription .btn-transparent,
.widget.widget-subscription .btn-small {
  width: 100%;
}
.widget.widget-latest-post .media .media-object {
  width: 150px;
  height: auto;
}
.widget.widget-latest-post .media .media-heading a {
  color: #000;
  font-size: 14px;
  font-weight: 300;
}
.widget.widget-latest-post .media p {
  font-size: 12px;
}
.widget.widget-category ul li {
  margin-bottom: 10px;
}
.widget.widget-category ul li a {
  color: #837f7e;
  font-weight: 200;
}
.widget.widget-category ul li a:before {
  padding-right: 10px;
  content: "\f3d1";
  font-family: "themefisher-font";
}
.widget.widget-category ul li a:hover {
  color: #000;
  padding-left: 5px;
}
.widget.widget-tag ul li {
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 5px;
}
.widget.widget-tag ul li a {
  color: #837f7e;
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid #dedede;
  border-radius: 30px;
  font-size: 12px;
}
.widget.widget-tag ul li a:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

.background {
  background-size: cover;
}

.bg-100 {
  height: 100vh;
}

.bg-1 {
  background-image: url(../images/backgrounds/bg-1.jpg);
  background-size: cover;
}

.bg-2 {
  background-image: url("../images/page-header-1.jpg");
  background-size: cover;
}
.bg-2:before {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.bg-coming-soon {
  background: url("../images/backgrounds/coming-soon-bg.jpg");
  background-size: cover;
  height: 100vh;
}

.bg-brand-identity {
  background-image: url("../images/backgrounds/brand-identity-bg.jpg");
  background-repeat: no-repeat;
}

.coming-soon {
  color: #fff;
  padding: 150px 0;
}
.coming-soon .block h1 {
  font-size: 25px;
  line-height: 40px;
  font-weight: 400;
}
.coming-soon .block p {
  color: #fff;
  margin-top: 20px;
  font-size: 12px;
}
.coming-soon .block .count-down .syotimer-cell {
  width: 25%;
  display: inline-block;
}
.coming-soon .block .count-down .syotimer-cell .syotimer-cell__value {
  font-size: 80px;
  line-height: 80px;
  text-align: center;
  position: relative;
  font-weight: bold;
}
.coming-soon .block .count-down .syotimer-cell .syotimer-cell__unit {
  font-weight: normal;
}
@media (max-width: 768px) {
  .coming-soon .block .count-down ul li {
    font-size: 50px;
  }
}
@media (max-width: 480px) {
  .coming-soon .block .count-down ul li {
    font-size: 50px;
  }
}
@media (max-width: 400px) {
  .coming-soon .block .count-down ul li {
    font-size: 40px;
  }
}
.coming-soon .block .count-down ul li:before {
  content: ":";
  font-size: 20pt;
  opacity: 0.7;
  position: absolute;
  right: 0px;
  top: 0px;
}
.coming-soon .block .count-down ul li:last-child:before {
  content: "";
}
.coming-soon .block .count-down div:after {
  content: " " attr(data-interval-text);
  font-size: 20px;
  font-weight: normal;
  text-transform: capitalize;
  display: block;
}

.account .block {
  background-color: #fff;
  border: 1px solid #dedede;
  padding: 30px;
  margin: 100px 0;
}
.account .block .logo {
  display: inline-block;
}
.account .block a {
  color: #000;
}
.account .block h2 {
  font-weight: 400;
  font-size: 25px;
  text-transform: uppercase;
  margin-top: 40px;
}
.account .block form {
  margin-top: 40px;
}
@media (max-width: 400px) {
  .account .block form .btn-main,
  .account .block form .btn-solid-border,
  .account .block form .btn-transparent,
  .account .block form .btn-small {
    padding: 14px 19px;
  }
}
.account .block form p {
  margin-bottom: 20px;
}
.account .block form input[type="email"],
.account .block form input[type="password"],
.account .block form input[type="text"] {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.shopping .widget-title {
  font-weight: 400;
  border-bottom: 1px solid #dedede;
  padding-bottom: 15px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
}

.checkout .block {
  padding: 15px;
  margin-bottom: 10px;
}

.checkout-form .form-group {
  position: relative;
  margin-bottom: 8px;
}
.checkout-form .form-group label {
  position: absolute;
  top: 18px;
  left: 15px;
  right: auto;
  bottom: auto;
  color: #888;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  opacity: 1;
  width: 85px;
}
.checkout-form .form-group input {
  border-radius: var(--radius-md);
  display: block;
  padding: 6px 10px 5px 100px;
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 50px;
}
.checkout-form .checkout-country-code .form-group {
  float: left;
}
.checkout-form .checkout-country-code .form-group:first-child {
  width: calc(45% - 2px);
  margin-right: 4px;
}
.checkout-form .checkout-country-code .form-group:last-child {
  width: calc(55% - 2px);
}

.shopping.cart .product-list .table .cart-amount th {
  background: #f9f9f9;
  padding: 10px;
  text-transform: uppercase;
}
.shopping.cart .product-list .table > tbody > tr > td {
  vertical-align: middle;
}
.shopping.cart .product-list .product-info a {
  margin-left: 10px;
  color: #000;
  font-weight: 600;
}
.shopping.cart .product-list .product-remove {
  color: #c7254e;
}
.shopping.cart .account-details {
  margin-top: 30px;
}
.shopping.cart .account-details legend {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
}
.shopping.cart .account-details .btn-pay {
  margin: 20px 0;
}

.product-checkout-details .product-card > a {
  padding-right: 20px;
}
.product-checkout-details .product-card .price {
  margin-top: 15px;
}
.product-checkout-details .product-card .media-object {
  width: 80px;
}
.product-checkout-details .product-card h4 {
  font-weight: 400;
  font-size: 14px;
  color: #555;
}
.product-checkout-details .product-card .remove {
  font-size: 12px;
  cursor: pointer;
}
.product-checkout-details .discount-code {
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  margin: 20px 0 10px;
  padding: 10px 0;
}
.product-checkout-details .discount-code p {
  margin: 0;
}
.product-checkout-details .discount-code p a {
  font-weight: 400;
  color: #555;
}
.product-checkout-details .summary-prices {
  border-style: solid;
  border-color: #dedede;
  border-width: 0px 0 1px 0;
  padding-bottom: 10px;
}
.product-checkout-details .summary-prices li {
  padding: 5px 0;
}
.product-checkout-details .summary-prices li span + span {
  float: right;
}
.product-checkout-details .summary-total {
  margin-top: 5px;
}
.product-checkout-details .summary-total > span {
  font-weight: 500;
  font-size: 18px;
}
.product-checkout-details .summary-total span + span {
  float: right;
}
.product-checkout-details .verified-icon {
  margin-top: 25px;
}
.product-checkout-details .verified-icon img {
  width: 100%;
}

.purchase-confirmation .purchase-confirmation-details {
  padding: 20px;
  border: 1px solid #dedede;
}
.purchase-confirmation .purchase-confirmation-details .table {
  margin: 0;
  color: #444;
}
.purchase-confirmation .purchase-confirmation-details .table b,
.purchase-confirmation .purchase-confirmation-details .table strong {
  font-weight: 400;
}

.empty-cart .block i {
  font-size: 50px;
}

.success-msg .block i {
  font-size: 40px;
  background: #1bbb1b;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  display: inline-block;
  line-height: 60px;
}

.page-404 {
  padding: 100px 0;
  text-align: center;
}
.page-404 h1 {
  font-size: 300px;
  font-weight: bold;
  line-height: 300px;
  margin-top: 30px;
}
@media (max-width: 480px) {
  .page-404 h1 {
    font-size: 130px;
    line-height: 150px;
  }
}
@media (max-width: 400px) {
  .page-404 h1 {
    font-size: 100px;
    line-height: 100px;
  }
}
@media (max-width: 768px) {
  .page-404 h1 {
    font-size: 150px;
    line-height: 200px;
  }
}
.page-404 h2 {
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 4px;
  font-weight: bold;
  margin-top: 30px;
}
.page-404 .copyright-text {
  margin-top: 50px;
  font-size: 12px;
}
.page-404 .btn-main,
.page-404 .btn-solid-border,
.page-404 .btn-transparent,
.page-404 .btn-small {
  margin-top: 40px;
}

/* contact page */
.contact-us {
  padding: 100px 0;
}

.contact-form {
  margin-bottom: 40px;
}
.contact-form .form-control {
  background-color: transparent;
  border: 1px solid #dedede;
  box-shadow: none;
  height: 38px;
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: 14px;
  border-radius: var(--radius-md);
}
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form #contact-submit:hover {
  border-color: var(--color-primary);
}
.contact-form #contact-submit {
  border: none;
  padding: 15px 0;
  width: 100%;
  margin: 0;
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
}
.contact-form textarea.form-control {
  padding: 10px;
  height: 120px !important;
  outline: none;
}

.contact-details #map {
  width: 100%;
  height: 300px;
}
.contact-details .contact-short-info {
  margin-top: 20px;
}
.contact-details .contact-short-info li {
  margin-bottom: 6px;
  color: #555;
  font-weight: 300;
}
.contact-details .contact-short-info li i {
  margin-right: 10px;
}

.social-icon {
  margin-top: 20px;
}
.social-icon ul li {
  display: inline-block;
  margin-right: 10px;
}
@media (max-width: 400px) {
  .social-icon ul li {
    margin-bottom: 5px;
    margin-right: 5px;
  }
}
.social-icon ul li a {
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid #000;
  text-align: center;
}
.social-icon ul li a:hover {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.social-icon ul li a:hover i {
  color: #fff;
}
.social-icon ul li a i {
  color: #000;
  display: inline-block;
  font-size: 20px;
  line-height: 50px;
  margin: 0;
}

.error {
  display: none;
  padding: 10px;
  color: #d8000c;
  border-radius: 4px;
  font-size: 13px;
  background-color: #ffbaba;
}

.success {
  background-color: #6cb670;
  border-radius: 4px;
  color: #fff;
  display: none;
  font-size: 13px;
  padding: 10px;
}

.footer {
  background: #f7f7f7;
  padding: 50px 0;
}
.footer .footer-menu {
  margin-top: 30px;
}
.footer .footer-menu li {
  display: inline-block;
  margin: 0 10px;
}
.footer .footer-menu li a {
  color: #333;
  font-size: 12px;
}
.footer .copyright-text {
  margin-top: 20px;
}

.copyright-text a {
  color: #000;
}

.social-media li {
  display: inline-block;
  margin: 0 5px;
}
.social-media li a {
  padding: 8px 10px;
}
.social-media li a i {
  font-size: 20px;
  color: #555;
}
/*# sourceMappingURL=style.css.map */

/* commerce — product card and shop component styles */

/* Container holding the image and the text */
.category_container {
  margin-top: 20px;
  position: relative;
  text-align: center;
  color: black;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered_low {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.low_left {
  position: absolute;
  bottom: 8px;
  left: 20px;
}
.plaque {
  display: flex;
  flex-direction: column;
  float: left;
  background-color: var(--color-white);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0;
}

h3.movieGeeksPlaque {
  font-family: var(--font-primary);
  color: #050505;
  font-weight: bold;
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 8px;
}
p.movieGeeksPlaque {
  font-family: var(--font-primary);
  font-size: 12px;
  color: #0a0a0a;
}

h2.movieGeeksProduct {
  font-family: var(--font-primary);
  font-weight: bold;
}
p.movieGeeksProduct {
  font-family: var(--font-primary);
}

.checkoutInput {
  padding: 3px;
  box-shadow: 3px 3px 5px grey;
  font-size: 14px;
  font-weight: 600;
  width: 300px;
}

.checkoutLabel {
  color: var(--color-dark);
  font-weight: 600;
  font-family: var(--font-primary);
  display: block;
}

.ticker-tape-container {
  overflow-x: hidden;

  width: 100%;
  display: flex;
}

.ticker-tape {
  --direction: normal;
  --duration: 60s;
  --delay: 0s;
  --iteration-count: infinite;
  display: flex;
  gap: 1rem;
  flex: 0 0 auto;
  margin-right: 1rem;
  min-width: 100%;
  align-items: center;
  animation: marquee var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* This is just some styling to make it look presentable */

.basic-styling {
  border-radius: 3px;
  background-color: var(--color-bg-light);
  padding: 1rem;
  color: var(--color-dark);
  font-size: 1rem;
  font-family: var(--font-primary);
}

.basic-styling span {
}

.promoSection {
  width: 100%;
  //height: 220px;
}
.promoBox {
  float: left;
  width: 33%;
  margin-bottom: 10px;
}

.promoBoxCenter {
  width: 33%;
  margin-bottom: 10px;
  float: left;
}

.promoBoxRight {
  float: right;
  width: 33%;
  margin-bottom: 10px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

div.desktop {
}
div.mobile {
}

@media screen and (max-width: 780px) {
  div.desktop {
    display: none;
  }
  div.mobile {
    display: block;
  }

  .filterCheckbox input[type="checkbox"] {
    transform: scale(1.1); /* Adjust scale factor as needed */
    margin-right: 8px; /* Optional: spacing between checkbox and label */
  }

  /* Optional: improve appearance on high-DPI screens */
  .filterCheckbox input[type="checkbox"] {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  .productPageSelector {
    width: 150px;
  }
}

@media screen and (min-width: 780px) {
  div.desktop {
    display: block;
  }

  div.mobile {
    display: none;
  }

  .productPageSelector {
    width: 300px;
  }

  .filterCheckbox input[type="checkbox"] {
    transform: scale(1); /* Adjust scale factor as needed */
    margin-right: 8px; /* Optional: spacing between checkbox and label */
  }

  /* Optional: improve appearance on high-DPI screens */
  .filterCheckbox input[type="checkbox"] {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.plpSelector {
  width: 110px;
}

@media only screen and (min-width: 1200px) {
  .responsiveCarousel {
    min-height: 300px;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1200px) {
  .responsiveCarousel {
    min-height: 260px;
  }
}

@media only screen and (min-width: 800px) and (max-width: 1000px) {
  .responsiveCarousel {
    min-height: 200px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 800px) {
  .responsiveCarousel {
    min-height: 140px;
  }
  div.shortCategoryText {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
  .responsiveCarousel {
    min-height: 120px;
  }
}

/**************************************************************

        Ribbon (test)


 */

.box {
  width: 70%;
  height: auto;
  background-color: var(--color-white);
  border: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.largebox {
  max-width: 400px;
  height: auto;
  background-color: #ffffff;
  position: relative;
}

.ribbon {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 30px solid transparent;
  border-top: 30px solid var(--color-red);
  position: absolute;
  bottom: 10px;
  right: -48px;
  padding: 0 10px;
  width: 180px;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
}
.ribbon .txt {
  position: absolute;
  top: -25px;
  left: 0px;
}

.discountPrice {
  color: var(--color-red);
  font-family: var(--font-mono);
  font-weight: 600;
}

.oldPrice {
  color: var(--color-dark);
  text-decoration: line-through;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 3px;
  font-weight: normal;
  font-size: smaller;
  font-family: var(--font-mono);
}

.displayVariant {
  display: block;
}

.hideVariant {
  display: none;
}

/***************************************************

        Product page styling for the images

 */

.productPageThumbRow {
  padding-top: 20px;
}
.productPageThumb {
  width: 80px;
  float: left;
  padding-right: 10px;
}
.productPageThumbImage {
  width: 100%;
}

.visibleLink {
  text-decoration: underline;
}

.large-link {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-left: 2px solid transparent;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.large-link::after {
  content: ">";
  font-family: serif;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: color 0.15s;
}

.large-link:hover,
.large-link:focus {
  background-color: rgba(249, 178, 51, 0.07);
  border-left-color: var(--color-accent-yellow);
  color: var(--color-text-primary);
}

.large-link:hover::after,
.large-link:focus::after {
  color: var(--color-accent-yellow);
}

.medium-link {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  padding: 2px 16px;
  border-left: 2px solid transparent;
  transition:
    border-color 0.15s,
    background-color 0.15s;
  margin-bottom: 0;
}

.medium-link:hover,
.medium-link:focus {
  background-color: rgba(249, 178, 51, 0.07);
  border-left-color: var(--color-accent-yellow);
  color: var(--color-text-primary);
}

.movieGeeksCheckbox {
  font-family: var(--font-primary);
  font-size: 16px;
}

/*************************************************

            Scaling chackboxes, mostly for mobile


 */

.menuCheckbox input[type="checkbox"] {
  transform: scale(1.1); /* Adjust scale factor as needed */
  margin-right: 8px; /* Optional: spacing between checkbox and label */
}

/* Optional: improve appearance on high-DPI screens */
.menuCeckbox input[type="checkbox"] {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

/* --- Design system: reusable typography classes --- */

.price,
.product-price {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Targets all dynamically rendered price spans (id="price_XXXX") */
[id^="price_"] {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

.format-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* design system utility classes */

/* typography utilities */
.text-h1 {
  font-family: var(--font-primary);
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

.text-h2 {
  font-family: var(--font-primary);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-text-primary);
}

.text-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-section-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.text-body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

.text-meta {
  font-family: var(--font-primary);
  font-size: var(--text-meta);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.text-format {
  font-family: var(--font-mono);
  font-size: var(--text-format);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.text-price {
  font-family: var(--font-mono);
  font-size: var(--text-price-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.text-price-sm {
  font-family: var(--font-mono);
  font-size: var(--text-price-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.btn-primary-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  padding: var(--spacing-btn-padding-y-sm) var(--spacing-btn-padding-x-sm);
  background: var(--color-primary);
  color: var(--color-text-light);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.btn-secondary-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  padding: var(--spacing-btn-padding-y-sm) var(--spacing-btn-padding-x-sm);
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid rgba(29, 27, 27, 0.25);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

/* product card typography */
.product-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--spacing-card-padding);
}

.product-card-img {
  background: var(--color-white);
  border-radius: var(--radius-md);
  aspect-ratio: 2/3;
  overflow: hidden;
  width: 100%;
}

/* badges */
.badge-campaign {
  font-family: var(--font-mono);
  font-size: var(--text-campaign-badge);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: rgba(249, 178, 51, 0.12);
  border: 1px solid rgba(249, 178, 51, 0.4);
  color: #7a5500;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.badge-new {
  font-family: var(--font-mono);
  font-size: var(--text-campaign-badge);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--color-accent-red);
  color: var(--color-white);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.badge-preorder {
  font-family: var(--font-mono);
  font-size: var(--text-campaign-badge);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--color-accent-yellow);
  color: var(--color-primary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* section headers */
.section-dark {
  padding: var(--spacing-section-padding-y) var(--spacing-section-padding-x);
  background: var(--color-primary);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 2px;
  margin-bottom: 10px;
}

/* Extra top spacing between all sections except the first */
.col-xl-9 > .section-header ~ .section-header {
  margin-top: 3rem;
}

.section-header h2 {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--lh-tight);
}

.section-link {
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.section-link:hover {
  color: var(--color-text-primary);
}

/* page background */
body {
  background-color: var(--color-background);
}

/* Cart icon — invert black PNG to cream on dark header */
.cart-link img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Cart counter */
.cart-counter {
  font-family: var(--font-mono);
  font-size: var(--text-nav);
  font-weight: var(--fw-regular);
  color: rgba(255, 245, 233, 0.85);
}

/* Format checkboxes on dark navbar */
.menuCheckbox span {
  color: rgba(255, 245, 233, 0.85);
}

.menuCheckbox input[type="checkbox"] {
  accent-color: var(--color-accent-yellow);
}
#cartContent {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* product grid rows */
#newsRow,
#upcomingRow,
#relaunchRow,
#seasonRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-grid-gap);
  margin-bottom: 2rem;
}

/* 4 per row on large screens — ID selector beats Bootstrap's .col-lg-3 specificity */
#newsRow > .plaque,
#upcomingRow > .plaque,
#relaunchRow > .plaque,
#seasonRow > .plaque {
  width: calc(25% - 9px);
  flex-shrink: 0;
}

/* 2 per row on tablets */
@media (max-width: 991px) {
  #newsRow > .plaque,
  #upcomingRow > .plaque,
  #relaunchRow > .plaque,
  #seasonRow > .plaque {
    width: calc(50% - 6px);
  }
}

/* 2 per row on phones — mirrors desktop grid, just fewer columns */
@media (max-width: 576px) {
  #newsRow,
  #upcomingRow,
  #relaunchRow,
  #seasonRow {
    gap: 8px;
  }

  #newsRow > .plaque,
  #upcomingRow > .plaque,
  #relaunchRow > .plaque,
  #seasonRow > .plaque {
    width: calc(50% - 4px);
  }
}
  /* PLP listing, same grid logic as the homepage rows */
  #boxList {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-grid-gap);
    margin-bottom: 2rem;
  }

  /* 4 per row on large screens */
  #boxList > .plaque {
    width: calc(25% - 9px);
    flex-shrink: 0;
  }

  /* 2 per row on tablet */
  @media (max-width: 991px) {
    #boxList > .plaque {
      width: calc(50% - 6px);
    }
  }

  /* 2 per row on mobile, smaller gap */
  @media (max-width: 576px) {
    #boxList {
      gap: 8px;
    }
    #boxList > .plaque {
      width: calc(50% - 4px);
    }
  }

  .section-header h2 {
    font-size: 22px;
  }

  .col-xl-9 > .section-header:first-child {
    margin-top: 2rem;
  }

  .col-xl-9 > .section-header ~ .section-header {
    margin-top: 2rem;
  }


/* Mobile menu — right-side drawer (overrides modal-fullscreen-md-down via ID specificity) */
#mobileMenuModal .modal-dialog,
#genre-modal .modal-dialog,
#campaign-modal .modal-dialog,
#theme-modal .modal-dialog,
#person-modal .modal-dialog,
#label-modal .modal-dialog,
#about-modal .modal-dialog {
  margin: 0 0 0 auto;
  width: 300px;
  max-width: 85vw;
  min-height: 100%;
}

#mobileMenuModal.fade .modal-dialog,
#genre-modal.fade .modal-dialog,
#campaign-modal.fade .modal-dialog,
#theme-modal.fade .modal-dialog,
#person-modal.fade .modal-dialog,
#label-modal.fade .modal-dialog,
#about-modal.fade .modal-dialog {
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

#mobileMenuModal.show .modal-dialog,
#genre-modal.show .modal-dialog,
#campaign-modal.show .modal-dialog,
#theme-modal.show .modal-dialog,
#person-modal.show .modal-dialog,
#label-modal.show .modal-dialog,
#about-modal.show .modal-dialog {
  transform: translateX(0);
}

#mobileMenuModal .modal-content,
#genre-modal .modal-content,
#campaign-modal .modal-content,
#theme-modal .modal-content,
#person-modal .modal-content,
#label-modal .modal-content,
#about-modal .modal-content {
  min-height: 100dvh;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border: none;
  box-shadow: -4px 0 24px rgba(29, 27, 27, 0.15);
}

/* Mobile menu modals */
#mobileMenuModal .modal-header,
#genre-modal .modal-header,
#campaign-modal .modal-header,
#theme-modal .modal-header,
#person-modal .modal-header,
#label-modal .modal-header,
#about-modal .modal-header {
  padding: 14px 16px;
  border-bottom-color: rgba(29, 27, 27, 0.08);
}

#mobileMenuModal .modal-title,
#genre-modal .modal-title,
#campaign-modal .modal-title,
#theme-modal .modal-title,
#person-modal .modal-title,
#label-modal .modal-title,
#about-modal .modal-title {
  font-family: var(--font-primary);
  font-size: 36px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-secondary);
}

#mobileMenuModal .modal-body,
#genre-modal .modal-body,
#campaign-modal .modal-body,
#theme-modal .modal-body,
#person-modal .modal-body,
#label-modal .modal-body,
#about-modal .modal-body {
  padding: 8px 0;
}

/* Back button in sub-modals */
.modal-header .btn {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 0;
}

/* Navbar — background on the nav itself so it covers the full viewport width flush to top */
nav.navbar {
  background-color: #1f2525;
  padding-top: 0;
  padding-bottom: 0;
  /* Bootstrap's navbar-dark default (rgba(255,255,255,.55)) reads as low-
     contrast grey on our near-black background — brighten it to match the
     warm cream used elsewhere on the dark navbar (cart counter, format
     checkboxes). Overriding the variable covers nav-links, dropdown
     toggles/carets, and the navbar-toggler icon in one place. */
  --bs-navbar-color: rgba(255, 245, 233, 0.85);
  --bs-navbar-hover-color: var(--color-text-light);
  --bs-navbar-active-color: var(--color-text-light);
}

/* Dropdown — refined light, editorial style */
.navbar .dropdown-menu {
  border: none;
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 20px rgba(29, 27, 27, 0.12),
    0 1px 4px rgba(29, 27, 27, 0.06);
  padding: 8px 0;
  min-width: 200px;
}

.navbar .dropdown-item {
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  padding: 6px 16px;
  border-left: 2px solid transparent;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(249, 178, 51, 0.07);
  border-left-color: var(--color-accent-yellow);
  color: var(--color-text-primary);
}

/* Space between sticky header and first content section */
#mgCarousel {
  margin-top: var(--spacing-section-padding-y);
}

.banner-grid {
  margin-top: var(--spacing-section-padding-y);
  --bs-gutter-x: var(--spacing-component-gap);
  --bs-gutter-y: var(--spacing-component-gap);
}

.col-xl-9 > .section-header:first-child {
  margin-top: var(--spacing-section-padding-y);
}

/* product card layout — overrides commerce.css defaults */

/* Make anchor transparent to flex layout so .box and title div are direct flex children */
.plaque > a {
  display: contents;
}

/* Image box — ordered first. Fixed frame + inset padding so covers read
   smaller and consistent no matter the source image's own dimensions.
   Left padding matches the title's left inset (12px) so the cover lines
   up with the title text instead of sitting centered. */
.plaque .box {
  order: 0;
  height: 200px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left:10px;
}

/* object-fit:contain lets mismatched aspect ratios (portrait covers vs.
   landscape "half block" shots) sit inset on white without cropping or
   stretching — avoids editing each cover by hand. object-position:left
   keeps the artwork itself flush left rather than centered in any
   leftover space. !important beats the inline height:180px the platform
   template puts on the <img>. */
.plaque .box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Title/subtitle container — ordered second */
.plaque > a > div:not(.box) {
  order: 1;
  padding: 8px 12px 0;
}

/* Hide empty paragraph tags inside anchor */
.plaque a > p {
  display: none;
}

/* Format select container — flex item after title */
.plaque > div[style*="float:left"] {
  order: 2;
  padding: 6px 12px 0;
}

/* Styled dropdown */
.plaque select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%231d1b1b' stroke-opacity='0.45' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  padding: 6px 30px 6px 10px;
  width: 100%;
  height: auto;
  cursor: pointer;
  outline: none;
}

.plaque select:focus {
  border-color: var(--color-primary);
}

/* Visually hidden but readable by screen readers */
.plaque label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.plaque .desktop {
  display: none;
}

/* Clear div — harmless empty element, hide it */
.plaque > div[style*="clear"] {
  display: none;
}

/* Price + Button row */
.plaque > table {
  order: 3;
  display: flex;
  padding: 8px 12px 12px;
  margin-top: auto;
  width: 100%;
}

.plaque > table tbody,
.plaque > table tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.plaque > table td {
  display: flex;
  width: auto;
  padding: 0;
  align-items: center;
}

/* Price number */
.plaque table span[id^="price_"] {
  font-family: var(--font-primary);
  font-size: var(--text-price-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

/* Title — reserve 2 lines always, so a 1-line title doesn't push the
   subtitle (and everything below it) up relative to a 2-line one. Longer
   titles clamp with an ellipsis instead of pushing a 3rd line. */
h3.movieGeeksPlaque {
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0 0 2px;
  line-height: var(--lh-heading);
  min-height: calc(var(--text-h3) * var(--lh-heading) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtitle / year / director — reserve 2 lines always, so plaques with no
   director (empty second line) still align their cover with plaques that
   have one, instead of sitting a line higher. */
p.movieGeeksPlaque {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-normal);
  min-height: calc(var(--text-body-sm) * var(--lh-normal) * 2);
}

/* Base button styles — .plaque button.btn-primary is (0,2,1) vs .btn.btn-primary (0,2,0) */
.plaque button.btn-primary {
  font-family: var(--font-mono);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  margin-right: 0;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.plaque button.btn-secondary {
  font-family: var(--font-mono);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  margin-right: 0;
  white-space: nowrap;
  transition:
          background 0.15s,
          color 0.15s,
          border-color 0.15s;
}


/* Köp — filled, primary action */
.plaque button.btn-buy {
  background: var(--color-primary);
  color: var(--color-text-light);
  border: 1.5px solid var(--color-primary);
}

.plaque button.btn-buy:hover {
  opacity: 0.85;
}

/* Förboka — muted gray, communicates "not yet available" */
.plaque button.btn-preorder {
  background: rgba(29, 27, 27, 0.06);
  color: var(--color-text-secondary);
  border: 1.5px solid rgba(29, 27, 27, 0.15);
}

.plaque button.btn-preorder:hover {
  background: rgba(29, 27, 27, 0.12);
  color: var(--color-text-primary);
  border-color: rgba(29, 27, 27, 0.3);
}

/* campaign blocks — sidebar promo tiles */
.campaign-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: 24px;
  margin-bottom: 10px;
  min-height: 148px;
  border-radius: 0;
  text-decoration: none;
  transition: opacity 0.15s;
}

.campaign-block:hover {
  color: var(--color-text-light);
  opacity: 0.9;
}

.campaign-block--image {
  padding: 0;
  min-height: unset;
  overflow: hidden;
}

.campaign-block--image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.campaign-block-price {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--color-text-light);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0;
}

.campaign-block-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  color: rgba(255, 245, 233, 0.65);
  margin: 6px 0 0;
}

.campaign-block-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 20px;
  display: block;
}

/* footer */
.site-footer {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: 64px 0 0;
  margin-top: 48px;
}

.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* Brand column */
.footer-wordmark {
  display: block;
  width: 190px;
  height: auto;
  color: var(--color-text-light);
  margin-bottom: 14px;
}

.footer-brand-name {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--fw-bold);
  color: var(--color-text-light);
  margin-bottom: 14px;
}

.footer-brand-tagline {
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  color: rgba(255, 245, 233, 0.7);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 280px;
}

/* Social links */
.footer-social {
  display: flex;
  gap: var(--spacing-component-gap);
  margin-top: 20px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 245, 233, 0.85);
  text-decoration: none;
  transition: color 0.15s;
  flex-shrink: 0;
}

.footer-social-link:hover {
  color: var(--color-text-light);
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* Link columns */
.footer-col-heading {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: #eeeeee;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-family: var(--font-primary);
  font-size: 16px;
  color: #EEEEEE;
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: rgba(255, 245, 233, 0.65);
}

/* Cancel-order link — same list as the other footer links, but quieter:
   smaller and dimmer so it's findable without competing with the primary
   support links above it. */
.footer-links a.footer-cancel-link {
  font-size: var(--text-body-sm);
  color: rgba(255, 245, 233, 0.5);
}

.footer-links a.footer-cancel-link:hover {
  color: rgba(255, 245, 233, 0.85);
}

/* Payment row */
.footer-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.footer-payment-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: rgba(255, 245, 233, 0.65);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.footer-payment-logos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.5px;
}

.payment-visa {
  background: #1a1f71;
  color: #f7b733;
  font-family: serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 1px;
}

.payment-klarna {
  background: #ffb3c7;
  color: #17120e;
  font-family: var(--font-primary);
  font-size: 13px;
}

.payment-postnord {
  background: #004b87;
  color: #00b5e2;
  font-family: var(--font-primary);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}

/* Copyright bar */
.footer-copyright {
  padding: 20px 0;
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  color: rgba(255, 245, 233, 0.6);
  text-align: center;
}

@media (max-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Footer container — matches navbar's max-width so both edges align */
.site-footer .container {
  max-width: 1296px;
}

/* Mobile search panel — drops below fixed header */
#searchField {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 1029;
  background: var(--color-primary);
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 245, 233, 0.1);
  box-shadow: 0 4px 16px rgba(29, 27, 27, 0.35);
}

/* Search toggle icon button in navbar */
.nav-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  color: var(--color-text-light);
  opacity: 0.9;
  transition: opacity 0.15s;
}
.nav-search-toggle:hover,
.nav-search-toggle:focus {
  opacity: 1;
  color: var(--color-text-light);
}

/* Search button — matches input field height and border-radius */
#searchField .btn.btn-primary {
  border-radius: var(--radius-md);
  align-self: stretch;
}

/* === Navbar logo === */
.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-logo {
  height: 80px;
  width: auto;
  display: block;
}

/* === Nav hierarchy === */
.navbar .navbar-nav .nav-link span {
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  font-weight: var(--fw-bold);
}

/* Kampanjer — accent yellow signals promotional entry point */
.nav-menu-accent-label {
  color: var(--color-accent-red);
}

/* === Cart badge === */
nav.navbar .cart-link {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.cart-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 32px;
  height: 32px;
  background: var(--color-background);
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* === Header search form (desktop) === */
.header-search-form {
  flex: 1 1 auto;
  max-width: 600px;
  margin-left: 16px;
}

.header-search-input.form-control {
  border: 1px solid #1f2525;
  background: #FFFFFF;
  color: var(--color-primary);
  border-radius: var(--radius-md);


  font-size: var(--text-body-sm);
}

.header-search-btn {
  padding: var(--spacing-btn-padding-y-sm);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Search clear (×) button — override browser default gradient/blue */
/* Search clear button — reset browser default (gradient/blue) */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231d1b1b%22 stroke-width=%223%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M18 6 6 18M6 6l12 12%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}

input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* Header search — light icon on dark background.
   Uses input.header-search-input to match base rule specificity (element + class = 0,1,1) */
input.header-search-input::-webkit-search-cancel-button {

  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%223%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M18 6 6 18M6 6l12 12%22/%3E%3C/svg%3E");
  opacity: 1;
}

.header-search-input::placeholder {
  color: var(--color-primary);
}

.header-search-input.form-control:focus {
  border-color: #CCCCCC;
  background: #FFFFFF;
  box-shadow: none;
  color: var(--color-primary);
}

/* === Format checkboxes — inline row in header === */
.navbar .menuCheckbox {
  display: flex;
  align-items: center;
  margin-right: 40px;
  font-size: 14px;
  white-space: nowrap;
  line-height: 1.4;
}

/************************************************************

    Additions

 */


.header-container {
  display: flex;
  flex-direction: column;
}

.header-row-top {
  min-height: 60px;
}

.header-row-bottom {
  padding-top: 6px;
  padding-bottom: 6px;
}

.format-column form label {
  margin-bottom: 4px;
}


/* Default table */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

/* Mobile layout */
@media (max-width: 600px) {

  /* Keep THEAD as a normal table */
  .responsive-table thead tr {
    display: table-row;
  }

  .responsive-table thead th {
    display: table-cell;
  }

  /* TBODY rows become a 3‑column, 2‑row grid */
  .responsive-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
            "a a a"
            "empty b c";
  }

  /* Fake empty first cell on second row */
  .responsive-table tbody tr::before {
    content: "";
    grid-area: empty;
  }

  /* First TD (A) spans all three columns on row 1 */
  .responsive-table tbody td:first-child {
    grid-area: a;
    font-weight: 600;
    padding-bottom: 4px;
  }

  /* Second TD (B) goes to row 2, column 2 */
  .responsive-table tbody td:nth-child(2) {
    grid-area: b;
  }

  /* Third TD (C) goes to row 2, column 3 */
  .responsive-table tbody td:nth-child(3) {
    grid-area: c;
  }
}