/* Generic 
-------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=block');
/*body {
	font-family: 'Roboto', sans-serif;
	color: #36344b;
} 


a, a:hover, a:active, .btn-link, .btn-link:hover {
	color: #36344b;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn {
	font-family: 'Roboto', sans-serif ;
}
*/

/* =========================
   GLOBAL TYPOGRAPHY
   ========================= */
   :root {
	--default-text-font-size: 15px;
	--base-text-font-size: 16px;
  
	--heading-font-family: Arimo, sans-serif;
	--heading-font-weight: 400;
	--heading-font-style: normal;
  
	--text-font-family: Barlow, sans-serif;
	--text-font-weight: 500;
	--text-font-style: normal;
	--text-font-bolder-weight: 600;
  
	--text-link-decoration: underline;
  
	--text-color: #282b2d;
	--heading-color: #596166;
	--border-color: #e1e3e4;
	--form-border-color: #d4d6d8;
  
	--accent-color: #596166;
	--link-color: #1f5135;
	--link-color-hover: #0a1a11;
  
	--input-background: #ffffff;
  
	--error-color: #ff0000;
	--success-color: #00aa00;

  
	--header-background: #ffd00a;
	--header-text-color: #667878;
	--header-accent-color: #000000;
  
	--footer-background-color: #000000;
	--footer-heading-text-color: #ffffff;
	--footer-body-text-color: #ece6e6;
	--footer-accent-color: #ff0000;
  }
  
/* =========================
   GLOBAL TYPOGRAPHY
   ========================= */

   html {
	font-size: var(--base-text-font-size);
  }
  
  body {
	font-family: var(--text-font-family);
	font-weight: var(--text-font-weight);
	font-style: var(--text-font-style);
	font-size: var(--base-text-font-size);
	color: var(--text-color);
  }
  
  /* Headings */
  h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font-family);
	font-weight: var(--heading-font-weight);
	font-style: var(--heading-font-style);
	color: var(--heading-color);
  }
  
  /* Paragraphs */
  p {
	color: var(--text-color);
	line-height: 1.6;
  }
  
  /* =========================
	 LINKS
	 ========================= */
  
  a {
	color: var(--link-color);
	text-decoration: none; /* Shopify default feel */
  }
  
  a:hover,
  a:focus {
	color: var(--link-color-hover);
	text-decoration: none;
  }
  
  /* =========================
	 BUTTONS
	 ========================= */
 
  
  button:hover,
  .btn:hover {
	filter: brightness(0.95);
  }
  
  /* Secondary buttons */
  .btn-secondary {
	background-color: var(--secondary-button-background);
	color: var(--secondary-button-text-color);
  }
  
  /* =========================
	 FORMS
	 ========================= */
  
  input,
  select,
  textarea {
	background-color: var(--input-background);
	border: 1px solid var(--form-border-color);
	font-family: var(--text-font-family);
  }
  




/* Header 
-------------------------------*/
header {
	background-color: #fdc848 /*{Header | Background colour}*/;
}
header .header-topbar {
	border-color: #fdc848 /*{Header | Topbar border colour}*/;
}
header .header-topbar .navbar-nav > li > a,
header .header-topbar .header-phone {
	color: #286047/*{Header | Topbar link colour}*/;
}
header .btn-header,
header .btn-header:hover {
    color: #286047/*{Header | Account & cart link colour}*/;
}
header .cart-count {
    background-color: #d24d4d /*{buttons | primary-btn-background-colour}*/;
    color: #ffffff /*{buttons | primary-btn-text-colour}*/;
}
.header-menu {
	background-color: #0a1a13 /*{Header | Menu background colour}*/;
}
.header-menu .navbar-nav > li > a,
.navbar-mobile a.nav-link {
	color: #ffffff /*{Header | Menu colour}*/;
}

.shipping-nav .navbar{
	color: #ffffff;
	display: flex;
  	align-items: center;
  	justify-content: center;
	min-height: 48px;          
	font-size: 14px;
}
/* Footer 
-------------------------------*/
.wrapper-footer {
	background-color: #36344b /*{Footer | Background color}*/;
}
.wrapper-footer h4 {
	color: #ffffff /*{Footer | Heading colour}*/;
}
.wrapper-footer a, 
.wrapper-footer a:hover, 
.wrapper-footer a:active,
.wrapper-footer * {
	color: #bbb9d1 /*{Footer | Text colour}*/;
}
footer .nav.list-social i {
    background-color: #d24d4d /*{Footer | Social icon background colour}*/;
    color: #ffffff /*{Footer | Social icon colour}*/;
}
footer .footer-item {
	display: block;
    padding: 0.5rem 1rem;
}

/* =====================================================
   Featured Category Product Carousel (Alizarin)
   ===================================================== */

/* Ensure carousel container can position arrows */
.js-featured-carousel {
	position: relative;
  }
  
  /* -----------------------------------------------------
	 Product slide layout
	 ----------------------------------------------------- */
  .js-featured-carousel .product-slide {
	padding: 0 8px;
  }
  
  .js-featured-carousel .product-slide > * {
	width: 100%;
  }
  
  /* Neutralise Bootstrap grid inside Slick slides */
  .js-featured-carousel .product-slide .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
  }
  
  .js-featured-carousel .product-slide [class*="col-"] {
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
  }
  
  /* -----------------------------------------------------
	 Slick arrows – LEFT & RIGHT of carousel
	 ----------------------------------------------------- */
  .js-featured-carousel .slick-prev,
  .js-featured-carousel .slick-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
  
	width: 36px;
	height: 36px;
  
	display: block !important;
	opacity: 1 !important;
  }
  
  /* Left arrow */
  .js-featured-carousel .slick-prev {
	left: -18px;
	right: auto;
  }
  
  /* Right arrow */
  .js-featured-carousel .slick-next {
	right: -18px;
	left: auto;
  }
  
  /* Arrow icons */
  .js-featured-carousel .slick-prev:before,
  .js-featured-carousel .slick-next:before {
	font-size: 20px;
	color: #000;      /* change to #fff if background is dark */
	opacity: 1;
  }
  
  /* Optional: arrow background for visibility */
  .js-featured-carousel .slick-prev,
  .js-featured-carousel .slick-next {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 50%;
  }

  /* =========================
   VIEW ALL HOVER EFFECT
   ========================= */

.view-all-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.6s ease;
  }
  
  /* Arrow hidden by default */
  .view-all-arrow {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .view-all-link:hover,
	.view-all-link:focus {
	text-decoration: none;          /* 👈 force no underline */
	transform: translateX(-6px);
	}
  
  .view-all-link:hover .view-all-arrow {
	opacity: 1;
	transform: translateX(0);
  }
  
  

/* =========================
BRAND CARD IMAGE SIZE FIX
========================= */

.brand-card-image {
	display: block;
	width: 100%;
	height: 260px;              
	overflow: hidden;
}

.brand-card {
	transition: transform 0.9s ease, box-shadow 0.9s ease;
}

.brand-card-image:hover img {
	transform: scale(1.08); 
  }
  
.brand-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s ease;
	transform: scale(1);
}
  

/* Buttons 
-------------------------------*/
/* Secondary button */
.btn-outline-secondary, .btn-default {
	color: #333333 /*{buttons | default-btn-text-colour}*/;
	background-color: #ffffff /*{buttons | default-btn-background-colour}*/;
	border-color: #cccccc /*{buttons | default-btn-border-colour}*/;
}
.btn-outline-secondary:hover, .btn-default:hover,
.btn-outline-secondary.disabled, .btn-default:disabled,
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle, .btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
	color: #333333 /*{buttons | default-btn-text-colour-hover}*/;
	background-color: #ebebeb /*{buttons | default-btn-background-colour-hover}*/;
	border-color: #adadad /*{buttons | default-btn-border-colour-hover}*/;
}
/* Primary button */
.btn-primary {
	color: #ffffff /*{buttons | primary-btn-text-colour}*/;
	background-color: #d24d4d /*{buttons | primary-btn-background-colour}*/;
	border-color: #d24d4d /*{buttons | primary-btn-border-colour}*/;
}
.btn-primary:hover,
.btn-primary.disabled, .btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
	color: #ffffff /*{buttons | primary-btn-text-colour-hover}*/;
	background-color: #c43d3d /*{buttons | primary-btn-background-colour-hover}*/;
	border-color: #c43d3d /*{buttons | primary-btn-border-colour-hover}*/;
}
/* Success button */
.btn-success {
	color: #ffffff /*{buttons | success-btn-text-colour}*/;
	background-color: #36344b /*{buttons | success-btn-background-colour}*/;
	border-color: #36344b /*{buttons | success-btn-border-colour}*/;
}
.btn-success:hover,
.btn-success.disabled, .btn-success:disabled,
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
	color: #ffffff /*{buttons | success-btn-text-colour-hover}*/;
	background-color: #484560 /*{buttons | success-btn-background-colour-hover}*/;
	border-color: #48455f /*{buttons | success-btn-border-colour-hover}*/;
}
/* Homepage 
-------------------------------*/
#homepage-content {
    background-color: #f8f8f8 /*{Homepage | Content background colour}*/;
}