/* 20260924193258 - v2 */
.gui,
.gui-block-linklist li a {
  color: #666666;
}

.gui-page-title,
.gui a.gui-bold,
.gui-block-subtitle,
.gui-table thead tr th,
.gui ul.gui-products li .gui-products-title a,
.gui-form label,
.gui-block-title.gui-dark strong,
.gui-block-title.gui-dark strong a,
.gui-content-subtitle {
  color: #000000;
}

.gui-block-inner strong {
  color: #848484;
}

.gui a {
  color: #0a8de9;
}

.gui-input.gui-focus,
.gui-text.gui-focus,
.gui-select.gui-focus {
  border-color: #0a8de9;
  box-shadow: 0 0 2px #0a8de9;
}

.gui-select.gui-focus .gui-handle {
  border-color: #0a8de9;
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
  border-color: #8d8d8d;
}

.gui-block-title {
  color: #333333;
  background-color: #ffffff;
}

.gui-content-title {
  color: #333333;
}

.gui-form .gui-field .gui-description span {
  color: #666666;
}

.gui-block-inner {
  background-color: #f4f4f4;
}

.gui-block-option {
  border-color: #ededed;
  background-color: #f9f9f9;
}

.gui-block-option-block {
  border-color: #ededed;
}

.gui-block-title strong {
  color: #333333;
}

.gui-line,
.gui-cart-sum .gui-line {
  background-color: #cbcbcb;
}

.gui ul.gui-products li {
  border-color: #dcdcdc;
}

.gui-block-subcontent,
.gui-content-subtitle {
  border-color: #dcdcdc;
}

.gui-faq,
.gui-login,
.gui-password,
.gui-register,
.gui-review,
.gui-sitemap,
.gui-block-linklist li,
.gui-table {
  border-color: #dcdcdc;
}

.gui-block-content .gui-table {
  border-color: #ededed;
}

.gui-table thead tr th {
  border-color: #cbcbcb;
  background-color: #f9f9f9;
}

.gui-table tbody tr td {
  border-color: #ededed;
}

.gui a.gui-button-large,
.gui a.gui-button-small {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large.gui-button-action,
.gui a.gui-button-small.gui-button-action {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large:active,
.gui a.gui-button-small:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui-input,
.gui-text,
.gui-select,
.gui-number {
  border-color: #8d8d8d;
  background-color: #ffffff;
}

.gui-select .gui-handle,
.gui-number .gui-handle {
  border-color: #8d8d8d;
}

.gui-number .gui-handle a {
  background-color: #ffffff;
}

.gui-input input,
.gui-number input,
.gui-text textarea,
.gui-select .gui-value {
  color: #000000;
}

.gui-progressbar {
  background-color: #76c61b;
}

/* custom */
/**** start advision, 12-10-20202 ********/
.languages .flag { width: 30px; height: 15px; opacity: 0.5; }
.languages .flag.active { opacity: 1; }
/**** end advision, 12-10-20202 **********/

/* These are comments, they can be left in your CSS code. They are here to help explain each part. */

/* This part of the CSS code ensures the link to the Back Office and the close button are hidden. */
.wsa-demobar a, .wsa-demobar a.close {
display: none !important;
}

/* This part of the CSS code ensures the USP bar is no longer visible when scrolling like the original demobar. */
.wsa-demobar{
position: absolute !important;

/* This part of the CSS code controls the background and font color of the the USP bar. Search online for any colour in 'hex' and replace the number below. #000000 is black, #ffffff is white. */
background-color: #5E2C6A !important;
color: #ffffff !important; }

/* This part of the CSS code ensures the USP bar is hidden for mobile visitors. When a screen is smaller than 767 pixels wide, the USPs will not fit properly. */
@media screen and (max-width: 767px){
.wsa-demobar{
display: none !important;
}
}

:root {
  --carousel-btn-width: 42px;
  --carousel-btn-height: 42px;
  --carousel-btn-icon-size: 16px;
  --color-contrast-lower: #e9e9e9;
  
  --brand-purple: #5A2E67;
  --brand-purple-deep: #4A2555;
  --brand-lime: #B2CA72;
  --brand-light-purple: #E2D7EE;
  --brand-light-green: #E7F0D6;
  
  --ink: #000000;
  --bg-main: #FFFFFF;
  --bg-card: #FDFDFD;
  --text-muted: #6b6478;
  --border-color: #E2D7EE;
  --text-white: #ffffff;
}

 body {
  -webkit-font-smoothing: antialiased;
}

.text-tagline {
  color: var(--brand-lime);
	font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
  text-align: left;
}

.btn {
	height: 48px;
}

.btn--primary {
  background-color: var(--brand-purple);
  color: #ffffff
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
 	gap: 10px;
  box-shadow: 0 4px 15px rgba(90, 46, 103, 0.35);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
}

.btn--primary:hover {
  background-color: var(--brand-lime);
  color: var(--ink);
  gap: 14px;
  transform: translateY(-2px); 
}

@media (max-width: 768px) {
  .btn--primary {
    font-size: 0.85rem;
  }
}

.accordion__panel p {
  font-weight: 400;
}

.page-scrapbook-centrale .recently-viewed,
.page-contact-us .recently-viewed,
.collection__products + .recently-viewed {
  display: none;
}

.carousel--recently-viewed .carousel__controls {
    position: absolute;
    right: 0;
    bottom: 100%;
    justify-content: flex-end;
}
@media (min-width: 64rem) {
  .carousel--recently-viewed .carousel__controls {
      position: absolute;
      right: 0;
      top: calc(-1 * var(--space-xl));
      margin: 0;
    }
}

.hero-carousel .carousel__counter {
	color: #fff;
}

.carousel__counter-index,
.carousel__counter-count {
  color: #fff;
}

.carousel__control,
.js .hero-carousel .carousel__control,
[data-theme="white"] .carousel__control {
  width: 42px;
  height: 42px;
  background: var(--brand-light-purple);;
  color: var(--brand-purple);
  cursor: pointer;
}

.carousel__control:hover {
  background: var(--brand-purple);
  color: #fff;
}

.js .hero-carousel .carousel__control:hover,
[data-theme="white"] .carousel__control:hover {
  background-color: var(--brand-lime);
  color: var(--text-white);
}

