/*
 Theme Name:   Glasses Store
 Theme URI:    https://webringly.com/
 Description:  Theme for glasssesstore.co.uk
 Author:       webringly.com
 Author URI:   https://webringly.com
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
html:root {
  --primary: var(--bricks-color-e64c77);
  --primary-light: var(--bricks-color-f50ff1);
  --secondary: var(--bricks-color-837f00);
  --secondary-light: var(--bricks-color-pgbblv);
  --black: var(--bricks-color-xhktih);
  --medium: var(--bricks-color-eedee7);
  --white: var(--bricks-color-cbecd1);

  --bricks-color-primary: var(--primary);
  --bricks-color-secondary: var(--secondary);
  --bricks-text-dark: var(--black);
  --bricks-text-medium: var(--medium);
  --bricks-text-light: var(--white);
  --bricks-text-info: var(--white);
  --bricks-text-success: var(--white);
  --bricks-text-warning: var(--white);
  --bricks-text-danger: var(--white);
  --bricks-bg-info: var(--secondary-light);
  --bricks-bg-success: var(--secondary-light);
  --bricks-bg-warning: #c12525;
  --bricks-bg-danger: #c12525;
  --bricks-bg-dark: var(--black);
  --bricks-bg-light: var(--white);
  --bricks-border-color: var(--primary-light);
  --bricks-border-radius: 6px;
  --bricks-tooltip-bg: var(--primary-light);
  --bricks-tooltip-text: var(--black);

  /*https://www.fluid-type-scale.com/calculate?minFontSize=13&minWidth=360&minRatio=1.125&maxFontSize=15&maxWidth=1366&maxRatio=1.2&steps=xs%2Cs%2Cm%2Cl%2Cxl&baseStep=m&prefix=text&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1366  */

  --text-xs: clamp(0.64rem, 0.01vi + 0.64rem, 0.65rem);
  --text-s: clamp(0.72rem, 0.09vi + 0.7rem, 0.78rem);
  --text-m: clamp(0.81rem, 0.2vi + 0.77rem, 0.94rem);
  --text-l: clamp(0.91rem, 0.34vi + 0.84rem, 1.13rem);
  --heckout-buttontext-xl: clamp(1.03rem, 0.51vi + 0.91rem, 1.35rem);

  /*
https://www.fluid-type-scale.com/calculate?minFontSize=19&minWidth=360&minRatio=1.25&maxFontSize=21&maxWidth=1366&maxRatio=1.333&steps=6%2C5%2C4%2C3%2C2%2C1&baseStep=4&prefix=h&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=360
*/

  --h-6: clamp(0.76rem, -0.03vi + 0.77rem, 0.74rem);
  --h-5: clamp(0.95rem, 0.06vi + 0.94rem, 0.98rem);
  --h-4: clamp(1.19rem, 0.2vi + 1.14rem, 1.31rem);
  --h-3: clamp(1.48rem, 0.42vi + 1.39rem, 1.75rem);
  --h-2: clamp(1.86rem, 0.76vi + 1.68rem, 2.33rem);
  --h-1: clamp(2.32rem, 1.26vi + 2.04rem, 3.11rem);
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/WorkSans-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/WorkSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/WorkSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/WorkSans-Bold.woff2") format("woff2");
}

body {
  font-family: "Work Sans", Arial, sans-serif;
  color: var(--dark);
  font-size: var(--text-m);
}

h1 {
  font-size: var(--h-1);
}

h2 {
  font-size: var(--h-2);
}

h3 {
  font-size: var(--h-3);
}

h4 {
  font-size: var(--h-4);
}

h5 {
  font-size: var(--h-5);
}

h6 {
  font-size: var(--h-6);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-s {
  font-size: var(--text-s);
}

.text-m {
  font-size: var(--text-m);
}

.text-l {
  font-size: var(--text-l);
}

.text-xl {
  font-size: var(--text-xl);
}

/* Heading size utility classes */
.h-6,
h6 {
  font-size: var(--h-6);
}

.h-5,
h5 {
  font-size: var(--h-5);
}

.h-4,
h4 {
  font-size: var(--h-4);
}

.h-3,
h3 {
  font-size: var(--h-3);
}

.h-2,
h2 {
  font-size: var(--h-2);
}

.h-1,
h1 {
  font-size: var(--h-1);
}

.bricks-background-primary {
  color: var(--white);
}

.brxe-button.bricks-button.bricks-background-secondary {
  transition: color 0.3s linear, background-color 0.3s linear;
}

* {
  -webkit-tap-highlight-color: transparent !important;
}

blockquote {
  font-family: inherit;
}

.woocommerce-notices-wrapper.brxe-container {
  margin-top: 30px;
}

.woocommerce-notices-wrapper {
  padding-left: 20px;
  padding-right: 20px;
}

.woocommerce-notices-wrapper > ul {
  border-radius: 6px !important;
}

.woocommerce-notices-wrapper.brxe-container a.button.wc-forward {
  border-radius: 6px;
  background: var(--white);
  color: #000;
  border-width: 1px;
}

.woocommerce-notices-wrapper.brxe-container a.button.wc-forward {
  margin: 0;
}

@media (max-width: 991px) {
  .woocommerce-notices-wrapper > ul > li {
    flex-wrap: wrap;
    justify-content: center !important;
    row-gap: 10px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .woocommerce-message {
    flex-wrap: wrap;
    justify-content: center !important;
    row-gap: 10px;
    text-align: center;
  }
}

/* Fix: font-display swap for Ionicons */
@font-face {
  font-family: Ionicons;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bricks/assets/fonts/ionicons/ionicons.woff2") format("woff2"),
       url("../bricks/assets/fonts/ionicons/ionicons.woff") format("woff"),
       url("../bricks/assets/fonts/ionicons/ionicons.ttf") format("truetype");
}