/*
Theme Name: WinnCoo Woo
Theme URI: https://winncoo.ulvenlabs.com
Author: WinnCoo
Author URI: https://winncoo.pl
Description: Custom WooCommerce theme matching Shopify Trove design.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: winncoo-woo
*/

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* Colors — based on Trove scheme-1 */
  --color-background: 255, 255, 255;
  --color-secondary-background: 247, 244, 243;
  --color-primary: 203, 50, 30;
  --color-text-heading: 79, 4, 37;
  --color-foreground: 79, 4, 37;
  --color-subtext: 79, 4, 37;
  --color-border: 220, 220, 220;
  --color-button: 148, 108, 24;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 240, 240, 240;
  --color-secondary-button-border: 192, 192, 192;
  --color-secondary-button-text: 79, 4, 37;
  --color-field: 255, 255, 255;
  --color-field-text: 79, 4, 37;
  --color-link: 79, 4, 37;
  --color-product-price-sale: 203, 50, 30;
  --color-badge-sale: #946c18;
  --color-badge-sale-text: #ffffff;
  --color-badge-soldout: #767676;
  --color-badge-soldout-text: #ffffff;
  --color-cart-bubble: #cb321e;
  --color-keyboard-focus: #cb321e;

  /* Typography */
  --font-body-family: 'Nunito Sans', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bolder: 500;
  --font-body-weight-bold: 700;
  --font-body-size: 1.5rem;
  --font-body-line-height: 1.6;

  --font-heading-family: 'Fraunces', serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-heading-letter-spacing: 0;
  --font-heading-transform: none;
  --font-heading-scale: 1;

  --font-subheading-family: 'Fraunces', serif;
  --font-subheading-weight: 600;
  --font-subheading-scale: 1.06;
  --font-subheading-transform: capitalize;
  --font-subheading-letter-spacing: 0;

  --font-navigation-family: 'Fraunces', serif;
  --font-navigation-weight: 600;

  --font-button-family: 'Fraunces', serif;
  --font-button-weight: 600;
  --buttons-letter-spacing: 0;
  --buttons-transform: capitalize;
  --buttons-height: 4.6rem;
  --buttons-border-width: 1px;

  /* Sizes */
  --font-hd1-size: 7.4rem;
  --font-hd2-size: 5.2rem;
  --font-h1-size: calc(var(--font-heading-scale) * 4rem);
  --font-h2-size: calc(var(--font-heading-scale) * 3.2rem);
  --font-h3-size: calc(var(--font-heading-scale) * 2.8rem);
  --font-h4-size: calc(var(--font-heading-scale) * 2.2rem);
  --font-h5-size: calc(var(--font-heading-scale) * 1.8rem);
  --font-h6-size: calc(var(--font-heading-scale) * 1.6rem);
  --font-subheading-size: calc(var(--font-subheading-scale) * var(--font-body-size));

  /* Radius */
  --buttons-radius: 100px;
  --inputs-radius: 100px;
  --textareas-radius: 10px;
  --blocks-radius: 10px;
  --blocks-radius-mobile: 0.8rem;
  --small-blocks-radius: 5px;
  --medium-blocks-radius: 6px;
  --pcard-radius: 10px;
  --pcard-inner-radius: 6px;
  --badges-radius: 5px;

  /* Layout */
  --page-width: 1700px;
  --page-width-margin: 2rem;
  --header-padding-bottom: 3.2rem;
  --header-padding-bottom-mobile: 2.4rem;

  /* Animation */
  --animation-long: .7s cubic-bezier(.3, 1, .3, 1);
  --animation-default: .5s cubic-bezier(.3, 1, .3, 1);
  --animation-fast: .3s cubic-bezier(.7, 0, .3, 1);
  --duration-default: 200ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  color: rgb(var(--color-foreground));
  background-color: rgb(var(--color-background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--font-heading-letter-spacing);
  text-transform: var(--font-heading-transform);
  margin: 0 0 1.5rem;
  line-height: 1.2;
  color: rgb(var(--color-text-heading));
}

h1 { font-size: var(--font-h1-size); }
h2 { font-size: var(--font-h2-size); }
h3 { font-size: var(--font-h3-size); }
h4 { font-size: var(--font-h4-size); }
h5 { font-size: var(--font-h5-size); }
h6 { font-size: var(--font-h6-size); }

p {
  margin: 0 0 1.5rem;
}

a {
  color: rgb(var(--color-link));
  text-decoration: none;
  transition: opacity var(--duration-default) ease;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Utility container */
.f-container {
  width: 100%;
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 1200px) {
  .f-container {
    padding-left: var(--page-width-margin);
    padding-right: var(--page-width-margin);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons */
.btn,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--buttons-height);
  padding: 0 2.4rem;
  font-family: var(--font-button-family);
  font-weight: var(--font-button-weight);
  font-size: var(--font-body-size);
  letter-spacing: var(--buttons-letter-spacing);
  text-transform: var(--buttons-transform);
  text-decoration: none;
  border: var(--buttons-border-width) solid transparent;
  border-radius: var(--buttons-radius);
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  cursor: pointer;
  transition: background-color var(--animation-fast), color var(--animation-fast), border-color var(--animation-fast);
  line-height: 1;
}

.btn:hover,
button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  opacity: 1;
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

.btn--secondary,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: rgb(var(--color-secondary-button));
  color: rgb(var(--color-secondary-button-text));
  border-color: rgb(var(--color-secondary-button-border));
}

.btn--secondary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border-color: rgb(var(--color-button));
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select,
.woocommerce input.input-text {
  width: 100%;
  height: var(--buttons-height);
  padding: 0 1.6rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--inputs-radius);
  background-color: rgb(var(--color-field));
  color: rgb(var(--color-field-text));
  outline: none;
  transition: border-color var(--duration-default);
}

textarea {
  height: auto;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  border-radius: var(--textareas-radius);
}

input:focus,
textarea:focus,
select:focus,
.woocommerce input.input-text:focus {
  border-color: rgb(var(--color-primary));
}

/* Site wrapper */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}

/* Skip link */
.skip-to-content-link {
  position: absolute;
  top: -100%;
  left: 2rem;
  z-index: 9999;
  background: rgb(var(--color-background));
  padding: 1rem 2rem;
}

.skip-to-content-link:focus {
  top: 2rem;
}

/* Color schemes — Trove mapping
   --------------------------------------------------------------- */
.color-scheme-1,
.color-background-1 {
  --color-background: 255, 255, 255;
  --color-secondary-background: 247, 244, 243;
  --color-primary: 203, 50, 30;
  --color-text-heading: 79, 4, 37;
  --color-foreground: 79, 4, 37;
  --color-subtext: 79, 4, 37;
  --color-border: 220, 220, 220;
  --color-border-alpha: 1;
  --color-button: 148, 108, 24;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 240, 240, 240;
  --color-secondary-button-border: 192, 192, 192;
  --color-secondary-button-text: 79, 4, 37;
  --color-field: 255, 255, 255;
  --color-field-text: 79, 4, 37;
  --color-product-price-sale: 203, 50, 30;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

.color-scheme-info {
  --color-background: 247, 244, 243;
  --color-secondary-background: 247, 244, 243;
  --color-primary: 79, 4, 37;
  --color-text-heading: 79, 4, 37;
  --color-foreground: 79, 4, 37;
  --color-subtext: 79, 4, 37;
  --color-border: 255, 255, 255;
  --color-border-alpha: 1;
  --color-button: 79, 4, 37;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 247, 244, 243;
  --color-secondary-button-border: 255, 255, 255;
  --color-secondary-button-text: 79, 4, 37;
  --color-field: 255, 255, 255;
  --color-field-text: 79, 4, 37;
  --color-product-price-sale: 122, 74, 15;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

.color-scheme-inverse {
  --color-background: 53, 0, 32;
  --color-secondary-background: 53, 0, 32;
  --color-primary: 203, 50, 30;
  --color-text-heading: 247, 244, 243;
  --color-foreground: 247, 244, 243;
  --color-subtext: 247, 244, 243;
  --color-border: 255, 255, 255;
  --color-border-alpha: 1;
  --color-button: 247, 244, 243;
  --color-button-text: 79, 4, 37;
  --color-secondary-button: 79, 4, 37;
  --color-secondary-button-border: 79, 4, 37;
  --color-secondary-button-text: 247, 244, 243;
  --color-field: 247, 244, 243;
  --color-field-text: 79, 4, 37;
  --color-product-price-sale: 203, 50, 30;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

/* Utility helpers
   --------------------------------------------------------------- */
.color-background-2 { background-color: rgb(var(--color-secondary-background)); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-subtext { color: rgba(var(--color-subtext), 0.85); }
.text-sm-extra { font-size: 1.2rem; line-height: 2rem; text-transform: uppercase; font-weight: 600; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.nowrap { white-space: nowrap; }
.pointer-events-none { pointer-events: none; }
.overflow-hidden { overflow: hidden; }
.bg-none { background: none !important; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1; }
.flex-grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 0.4rem; }
.gap-2 { gap: 0.8rem; }
.gap-3 { gap: 1.2rem; }
.gap-4 { gap: 1.6rem; }
.gap-5 { gap: 2rem; }
.gap-6 { gap: 2.4rem; }
.gap-8 { gap: 3.2rem; }
.gap-10 { gap: 4rem; }
.gap-x-2 { column-gap: 0.8rem; }
.gap-x-3 { column-gap: 1.2rem; }
.gap-x-4 { column-gap: 1.6rem; }
.gap-y-2 { row-gap: 0.8rem; }
.gap-y-3 { row-gap: 1.2rem; }
.gap-y-6 { row-gap: 2.4rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.list-unstyled { list-style: none; padding: 0; margin: 0; }
.no-underline { text-decoration: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.inset-full { inset: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-9 { z-index: 9; }
.z-10 { z-index: 10; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }
.order-first { order: -1; }
.order-last { order: 999; }
.rounded { border-radius: var(--blocks-radius); }
.blocks-radius { border-radius: var(--blocks-radius); }
.pill { border-radius: 100px; }

/* Link hover animation (reversed-link underline)
   --------------------------------------------------------------- */
.reversed-link {
  --reversed-link-gap: 0.1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap) / 0 var(--reversed-link-gap) no-repeat;
  background-position-x: right;
  transition: background-size var(--animation-default), color var(--animation-default);
}

@media (hover: hover) and (pointer: fine) {
  .reversed-link:hover {
    background-size: 100% var(--reversed-link-gap);
    background-position-x: left;
  }
}

/* Button sweep hover
   --------------------------------------------------------------- */
.btn,
.btn--primary,
.btn--secondary,
.btn--outline,
.btn--icon,
.btn--white {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before,
.btn--primary::before,
.btn--secondary::before,
.btn--outline::before,
.btn--icon::before,
.btn--white::before {
  content: '';
  position: absolute;
  inset-block: -0.1rem;
  inset-inline-start: -0.1rem;
  width: 0;
  background-color: rgb(var(--color-button));
  transition: width var(--animation-button);
  z-index: -1;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before,
  .btn--primary:hover::before,
  .btn--secondary:hover::before,
  .btn--outline:hover::before,
  .btn--icon:hover::before,
  .btn--white:hover::before {
    width: calc(100% + 0.2rem);
  }

  .btn:hover,
  .btn--primary:hover,
  .btn--secondary:hover,
  .btn--outline:hover,
  .btn--icon:hover,
  .btn--white:hover { color: rgb(var(--color-button-text)); }
}

.btn__text,
.btn__icon {
  position: relative;
  z-index: 1;
}