/* The line below imports most of the styles for your chosen theme.
It is recommended that you leave this here to receive bug fixes or additions to this theme. */

@import url('/assets/theme_cooper.css');

/* The styles below are automatically turned into controls on the Design Bar.
For more information, see the FAQ. */

/* Colors */

.store_name a:link, .store_name a:hover, .store_name a:visited {
  color: #222222;                   /*: Store Name :*/
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #product_name, #price, #sale_price {
  color: #222222;                   /*: Titles :*/
}

body, #main .faq h2, .label label, #product .better-select-selected-label {
  color: #6d6f71;                   /*: Text :*/
}

a:link, a:visited, a:active, #footer a, .no-products p {
  color: #222222;                   /*: Links :*/;
}

a:hover, #sidebar ul li.current a, body.faq #buttons .faqs, body.contact #buttons .contact_us {
  color: #888888;                   /*: Link Hover :*/
}

#main .button, #main button, #items_in_cart, #promotion, #variant_id_chzn .result-selected, #variant_id_chzn .result-selected.highlighted, .stock-remaining, .stock-sold {
  background-color: #222222;        /*: Buttons :*/
}

#main .button, #main button, #items_in_cart a, #promotion, #variant_id_chzn .result-selected, #variant_id_chzn .result-selected.highlighted {
  color: #ffffff;                   /*: Button Text :*/
}

hr, #thumbs a:hover, #product #variant_id, #footer, #product #variant_id_chzn > * {
  border-color: #ccc;               /*: Lines :*/
}

.product .flag.status, #product .status {
  background-color: #ccc;           /*: Product Status :*/
}

#content, #header, #footer{
  background-color: #FFFFFF;        /*: Content Background :*/
}

/* Layout */

#header .store_name {
  font-family: 'Comfortaa', sans-serif; /*: Store Name Font :*/
  text-align: left;                     /*: Store Name Alignment :*/
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #product_name{
  font-family: 'Comfortaa', sans-serif; /*: Title Font :*/
}

#banner {
  text-align:center;                /*: Header Image Alignment :*/
}


body{
  background-color: #e9e9e9;          /*: Body Background :*/
  font-family: 'Raleway', sans-serif; /*: Body Font :*/
  background-attachment: scroll;      /*: Background Attachment :*/
  background-repeat: repeat;          /*: Background Image Repeat :*/
  background-position: top center;    /*: Background Image Position :*/
}

/* These are non-CSS custom settings for the theme. It's best to leave these alone.
To create custom Design Bar attributes for your theme, view this help article:
https://storenvy.bolddesk.com/kb/article/229/how-do-i-add-settings-to-the-store-owner-ui */

storenvy {
  storenvy-featured-collection: collection-all;    /*: Featured Collection :*/
  storenvy-use-theme-background: if-false;         /*: Use Theme Background :*/
  storenvy-show-store-name: if-true;               /*: Show Store Name :*/
  storenvy-show-logo: if-true;                     /*: Show Logo :*/
  storenvy-show-stock-bars: if-false;              /*: Show Stock Bars :*/
}

/* Seen's Beans base colours */

body,
#content,
#header,
#footer {
  background: #FFFFFF !important;
}

body,
p,
span,
div,
li,
label,
#main,
#product,
#description {
  color: #5D6826 !important;
}

a,
a:link,
a:visited,
a:active {
  color: #5D6826 !important;
}

a:hover {
  color: #46501B !important;
}

button,
.button,
.btn,
input[type="submit"] {
  background-color: #5D6826 !important;
  color: #FFFFFF !important;
}
/* Seen's Beans layout rebuild */

#wrapper,
#container,
#content {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#store_info {
  text-align: center !important;
}

#content .row {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sidebar {
  width: 330px !important;
  min-width: 330px !important;
  max-width: 330px !important;
  margin: 0 !important;
  padding: 35px 38px 0 38px !important;
  float: none !important;
  background: #F2EFE6 !important;
  border-right: 2px solid #5D6826 !important;
  box-sizing: border-box !important;
}
#sidebar #logo {
  text-align: center !important;
  margin: 0 auto 35px auto !important;
}

#sidebar #logo img {
  width:180px !important;
  height:180px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 5px solid #5D6826 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

#main {
  flex: 1 !important;
  margin: 0 auto !important;
  padding: 0 55px 0 40px !important;
  float: none !important;
  box-sizing: border-box !important;
}

#seens-hero {
  width: 100% !important;
  height:320px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#seens-hero img {
  width: 100% !important;
  height:320px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.welcome-panel {
  width: 100% !important;
  margin: 0 !important;
  padding:25px 38px 0 38px;
  box-sizing: border-box !important;
}
.welcome-panel h2{
    margin:0 0 16px 0 !important;
    letter-spacing:1px !important;
}
#header {
  background: #2F3513 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
}

#slanger-title {
  color: #F2EFE6 !important;
  font-weight: bold !important;
  letter-spacing: 4px !important;
  padding: 6px 0 !important;
}
#top-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 34px !important;
  padding: 8px 20px 6px !important;
  font-weight: bold !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

#top-nav a {
  color: #F2EFE6 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#top-nav a:hover {
  color: #FFFFFF !important;
}

#slanger-title {
  padding-top: 4px !important;
}
#seens-hero{
    position:relative;
}

#seens-hero .hero-button,
#seens-hero .hero-button:link,
#seens-hero .hero-button:visited,
#seens-hero .hero-button:active {
  position: absolute !important;
  right: 70px !important;
  bottom: 45px !important;
  left: auto !important;
  transform: none !important;

  color: #F2EFE6 !important;
  background: #5D6826 !important;
  border: 2px solid #F2EFE6 !important;
  padding: 16px 42px !important;

  font-size: 18px !important;
  font-weight: bold !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

#seens-hero .hero-button:hover {
  color: #5D6826 !important;
  background: #F2EFE6 !important;
}
/* ===== SIDEBAR QR PANEL ===== */

#sidebar-qr{
  width:210px;
  margin:28px auto 35px;
  padding:18px;
  background:#FFFFFF;
  border:3px solid #5D6826;
  border-radius:10px;
  text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  box-sizing:border-box;
}

#sidebar-qr img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto 14px;
}

#sidebar-qr p{
  margin:0;
  color:#5D6826;
  font-size:13px;
  font-weight:bold;
  letter-spacing:1.5px;
  line-height:1.5;
  text-transform:uppercase;
}

#sidebar hr{
  margin:18px 0 !important;
}

#searchbox input{
  width:100% !important;
  box-sizing:border-box !important;
}

#seens-hero{
    position:relative;
    overflow:hidden;
}
/* ===== MOBILE FIX ===== */
@media screen and (max-width: 768px){

  #content .row{
    display:block !important;
    width:100% !important;
  }

  #sidebar{
    display:none !important;
  }

  #main{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  #seens-hero{
    width:100% !important;
    height:360px !important;
  }

  #seens-hero img{
    width:100% !important;
    height:360px !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

 #seens-hero .hero-button,
#seens-hero .hero-button:link,
#seens-hero .hero-button:visited,
#seens-hero .hero-button:active{
    right:18px !important;
    bottom:26px !important;
    padding:12px 22px !important;
    font-size:14px !important;
    letter-spacing:1px !important;
}
#header{
    display:none !important;
}

#store_info{
    display:none !important;
}

#top-nav{
    display:none !important;
}

#mobile-header{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:54px !important;
    height:54px !important;
    z-index:50 !important;
    background:transparent !important;
}

#slanger-title{
    display:none !important;
}

/* Hide sidebar until menu is opened */
#sidebar{
    display:none !important;
}

/* Show sidebar when menu is opened */
body.sidebar-visible #sidebar{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:280px !important;
    height:100vh !important;
    padding:30px 28px !important;
    background:#F2EFE6 !important;
    border-right:2px solid #5D6826 !important;
    overflow-y:auto !important;
    z-index:9999 !important;
}

body.drawer-open #sidebar,
body.drawer_open #sidebar,
html.drawer-open #sidebar{
  left:0 !important;
}

  .welcome-panel{
    padding:26px 24px 40px 24px !important;
  }

  .welcome-panel h2{
    font-size:28px !important;
    line-height:1.15 !important;
  }

  .welcome-panel h3{
    font-size:20px !important;
    line-height:1.3 !important;
  }

  .welcome-panel p{
    font-size:16px !important;
    line-height:1.5 !important;
}

#mobile-header a[href*="storenvy"],
#mobile-header .join,
#mobile-header .join-storenvy,
#mobile-header .button,
#mobile-header a:not(#drawer_button),
#mobile-header .marketplace-link{
    display:none !important;
}

}
/* ===== HIDE STORENVY PROMO BUTTONS ===== */
a[href*="storenvy.com/selling-on-storenvy"],
a[href*="storenvy.com/join"],
a[href*="storenvy.com/signup"],
#join_storenvy,
.join-storenvy,
.storenvy-join,
.open-store,
.open-store-button {
  display:none !important;
}
/* ===== HIDE STORENVY MOBILE CONTROLS ===== */

#se_iframe_wrapper{
    display:none !important;
}

#storenvy_controls{
    display:none !important;
}