/* --- /theme/blog-styles.css --- */
/*
  DOZO Blog Styles — extracted from puredozo.com
  Font: Chillax (geometric sans-serif)
  Platform: Shopify Dawn v15.3.0

  Путь в Shopify: assets/blog-styles.css
  Подключение: {{ 'blog-styles.css' | asset_url | stylesheet_tag }}
*/

/* ===== CSS VARIABLES — puredozo.com originals ===== */
:root {
  --pd-bg: #2A005E;
  --pd-bg-dark: #1E0044;
  --pd-accent: #4D008C;
  --pd-yellow: #F2FF00;
  --pd-yellow-soft: #FEF467;
  --pd-gradient-start: #D623ED;
  --pd-gradient-end: #8400D6;
  --pd-purple-light: #A65EFF;
  --pd-red: #F5333F;
  --pd-white: #FFFFFF;
  --pd-black: #121212;

  --pd-page-width: 1200px;
  --pd-grid-gap: 8px;
  --pd-grid-gap-mobile: 4px;

  --pd-btn-radius: 12px;
  --pd-btn-pill-radius: 40px;
  --pd-btn-height: 47px;

  --pd-card-radius: 0px;

  --pd-font: 'Chillax', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== BASE ===== */
.puredozo-blog,
.puredozo-article {
  font-family: var(--pd-font);
  font-weight: 700;
  background: var(--pd-bg);
  color: var(--pd-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.puredozo-blog *,
.puredozo-article * {
  box-sizing: border-box;
}

.puredozo-blog h1, .puredozo-blog h2, .puredozo-blog h3,
.puredozo-blog h4, .puredozo-blog h5, .puredozo-blog h6,
.puredozo-article h1, .puredozo-article h2, .puredozo-article h3,
.puredozo-article h4, .puredozo-article h5, .puredozo-article h6 {
  font-weight: 400;
  line-height: 1.2;
}

.puredozo-blog a,
.puredozo-article a {
  color: inherit;
  text-decoration: none;
}

.puredozo-blog img,
.puredozo-article img {
  max-width: 100%;
  display: block;
}

.blog-container {
  max-width: var(--pd-page-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== BLOG HEADER ===== */
.blog-header {
  background: var(--pd-bg);
  padding: 60px 0 40px;
  text-align: center;
}

.blog-title {
  font-size: 64px;
  font-weight: 700 !important;
  color: var(--pd-yellow);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 12px 0;
}

.blog-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* ===== FILTERS ===== */
.blog-filters {
  display: flex;
  gap: 8px;
  margin: 32px 0;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--pd-white);
  padding: 0 30px;
  min-height: var(--pd-btn-height);
  border-radius: var(--pd-btn-pill-radius);
  font-family: var(--pd-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-btn:hover {
  border-color: var(--pd-yellow);
  color: var(--pd-yellow);
}

.filter-btn.active {
  background: var(--pd-yellow);
  color: var(--pd-black);
  border-color: var(--pd-yellow);
}

/* ===== ARTICLES GRID ===== */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pd-grid-gap);
  margin-bottom: 60px;
}

/* ===== ARTICLE CARD ===== */
.article-card {
  background: var(--pd-bg-dark);
  border-radius: var(--pd-card-radius);
  overflow: hidden;
  transition: transform 0.3s;
}

.article-card:hover {
  transform: scale(1.03);
}

.article-image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pd-black);
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.article-card:hover .article-image img {
  transform: scale(1.03);
}

.article-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}

.badge {
  background: var(--pd-yellow);
  color: var(--pd-black);
  padding: 4px 12px;
  border-radius: var(--pd-btn-radius);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-new {
  background: var(--pd-yellow);
  color: var(--pd-black);
}

.badge-popular {
  background: linear-gradient(135deg, var(--pd-gradient-start), var(--pd-gradient-end));
  color: var(--pd-white);
}

.article-content {
  padding: 16px;
}

.article-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.article-meta svg {
  width: 14px;
  height: 14px;
}

.article-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 700 !important;
  line-height: 1.3;
}

.article-title a {
  color: var(--pd-white);
  transition: color 0.2s;
}

.article-title a:hover {
  color: var(--pd-yellow);
}

.article-excerpt {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* ===== TAGS ===== */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.tag {
  background: rgba(242, 255, 0, 0.12);
  color: var(--pd-yellow);
  padding: 4px 10px;
  border-radius: var(--pd-btn-radius);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s;
  border: none;
}

.tag:hover {
  background: var(--pd-yellow);
  color: var(--pd-black);
}

/* ===== ARTICLE CARD FOOTER ===== */
.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.article-author {
  display: flex;
  gap: 10px;
  align-items: center;
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pd-gradient-start), var(--pd-gradient-end));
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-initials {
  font-size: 15px;
  font-weight: 700;
  color: var(--pd-white);
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.author-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--pd-white);
}

.author-role {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* ===== BUTTONS ===== */
.read-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 20px;
  border-radius: var(--pd-btn-radius);
  background: var(--pd-yellow);
  color: var(--pd-black);
  font-family: var(--pd-font);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: opacity 0.2s;
}

.read-more-btn:hover {
  opacity: 0.9;
}

.read-more-btn svg {
  width: 14px;
  height: 14px;
}

/* ===== PAGINATION ===== */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-bottom: 60px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--pd-btn-height);
  padding: 0 30px;
  border-radius: var(--pd-btn-radius);
  background: transparent;
  color: var(--pd-white);
  border: 2px solid rgba(255, 255, 255, 0.3);
  font-family: var(--pd-font);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.2s;
}

.pagination-btn:hover {
  background: var(--pd-yellow);
  color: var(--pd-black);
  border-color: var(--pd-yellow);
}

.pagination-info {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* ===================================================================
   ARTICLE SINGLE PAGE
   =================================================================== */

/* ===== ARTICLE HERO ===== */
.article-hero {
  background: var(--pd-bg);
  padding: 80px 0 40px;
}

.article-hero .container {
  max-width: var(--pd-page-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}

.breadcrumbs a:hover {
  color: var(--pd-yellow);
}

.separator {
  color: rgba(255, 255, 255, 0.3);
}

/* Tags in hero */
.article-tags-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.tag-hero {
  background: rgba(242, 255, 0, 0.12);
  color: var(--pd-yellow);
  padding: 4px 10px;
  border-radius: var(--pd-btn-radius);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s;
}

.tag-hero:hover {
  background: var(--pd-yellow);
  color: var(--pd-black);
}

/* Title */
.article-hero-title {
  font-size: 42px;
  font-weight: 700 !important;
  color: var(--pd-white);
  line-height: 1.15;
  margin: 0 0 20px 0;
  max-width: 860px;
}

/* Meta */
.article-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.meta-item svg {
  width: 18px;
  height: 18px;
  color: var(--pd-yellow);
}

/* ===== FEATURED IMAGE ===== */
.article-featured-image {
  margin: 40px auto;
  max-width: var(--pd-page-width);
  padding: 0 20px;
}

.article-featured-image img {
  width: 100%;
  height: auto;
  border-radius: var(--pd-card-radius);
}

/* ===== ARTICLE LAYOUT ===== */
.article-container {
  max-width: var(--pd-page-width);
  margin: 0 auto;
  padding: 0 20px;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  padding: 32px 0 80px;
}

/* ===== ARTICLE CONTENT (RTE) ===== */
.article-main {
  min-width: 0;
}

.article-content.rte {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 48px;
}

.article-content.rte h2 {
  font-size: 28px;
  font-weight: 700 !important;
  color: var(--pd-yellow);
  margin: 40px 0 16px;
  text-transform: uppercase;
}

.article-content.rte h3 {
  font-size: 22px;
  font-weight: 700 !important;
  color: var(--pd-white);
  margin: 32px 0 12px;
}

.article-content.rte h4 {
  font-size: 18px;
  font-weight: 700 !important;
  color: var(--pd-white);
  margin: 24px 0 10px;
}

.article-content.rte p {
  margin: 0 0 20px;
}

.article-content.rte a {
  color: var(--pd-yellow);
  border-bottom: 1px solid rgba(242, 255, 0, 0.3);
  transition: border-color 0.2s;
}

.article-content.rte a:hover {
  border-bottom-color: var(--pd-yellow);
}

/* Override: buttons inside product cards must keep their own colors */
.article-content.rte .product-card-inline a {
  color: inherit;
  border-bottom: none;
}

.article-content.rte .product-inline-btn {
  color: var(--pd-black) !important;
  border-bottom: none !important;
}

.article-content.rte .product-inline-title a {
  color: var(--pd-white);
  border-bottom: none;
}

.article-content.rte .product-inline-title a:hover {
  color: var(--pd-yellow);
}

.article-content.rte ul,
.article-content.rte ol {
  margin: 20px 0;
  padding-left: 28px;
}

.article-content.rte li {
  margin-bottom: 8px;
}

.article-content.rte blockquote {
  border-left: 3px solid var(--pd-yellow);
  padding: 16px 24px;
  margin: 28px 0;
  background: rgba(242, 255, 0, 0.04);
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--pd-card-radius);
}

.article-content.rte code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  color: var(--pd-yellow);
}

/* ===== IMAGES IN CONTENT ===== */
.content-image-left {
  float: left;
  margin: 4px 24px 20px 0;
  max-width: 45%;
}

.content-image-right {
  float: right;
  margin: 4px 0 20px 24px;
  max-width: 45%;
}

.content-image-center {
  margin: 32px 0;
  text-align: center;
  clear: both;
}

.content-image-left img,
.content-image-right img,
.content-image-center img {
  width: 100%;
  height: auto;
  border-radius: var(--pd-card-radius);
}

.image-caption {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 6px;
  text-align: center;
}

/* ===== SHARE ===== */
.article-share {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 20px 0;
  margin: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.share-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 8px 0 0;
  text-transform: uppercase;
}

.share-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.share-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--pd-btn-radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--pd-white);
  font-family: var(--pd-font);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.share-btn:hover {
  background: var(--pd-yellow);
  color: var(--pd-black);
}

/* ===== FULL AUTHOR CARD ===== */
.author-card-full {
  background: var(--pd-bg-dark);
  border-radius: var(--pd-card-radius);
  padding: 32px;
  margin: 48px 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto auto;
  gap: 0 24px;
}

.author-card-avatar-wrap {
  grid-row: 1 / 3;
}

.author-card-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pd-gradient-start), var(--pd-gradient-end));
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-initials-large {
  font-size: 40px;
  font-weight: 700;
  color: var(--pd-white);
}

.author-card-header {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.author-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-card-name {
  font-size: 24px;
  font-weight: 700 !important;
  color: var(--pd-yellow);
  margin: 0;
}

.author-card-role {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.author-social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.author-social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(242, 255, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pd-yellow);
  transition: all 0.2s;
}

.author-social-link:hover {
  background: var(--pd-yellow);
  color: var(--pd-black);
}

.author-card-bio {
  margin-bottom: 16px;
}

.author-card-bio p {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
}

.author-card-stats {
  display: flex;
  gap: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--pd-yellow);
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== RELATED ARTICLES ===== */
.related-articles {
  margin: 60px 0;
}

.related-title {
  font-size: 28px;
  font-weight: 700 !important;
  color: var(--pd-white);
  text-transform: uppercase;
  margin: 0 0 24px 0;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pd-grid-gap);
}

.related-card {
  background: var(--pd-bg-dark);
  border-radius: var(--pd-card-radius);
  overflow: hidden;
  transition: transform 0.3s;
}

.related-card:hover {
  transform: scale(1.03);
}

.related-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pd-black);
}

.related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-content {
  padding: 14px;
}

.related-card-title {
  font-size: 15px;
  font-weight: 700 !important;
  color: var(--pd-white);
  line-height: 1.3;
  margin: 0 0 6px 0;
}

.related-date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* ===== COMMENTS ===== */
.article-comments {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.comments-title {
  font-size: 28px;
  font-weight: 700 !important;
  color: var(--pd-white);
  text-transform: uppercase;
  margin: 0 0 32px 0;
}

.comment-item {
  background: var(--pd-bg-dark);
  border-radius: var(--pd-card-radius);
  padding: 20px;
  margin-bottom: 8px;
}

.comment-header {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pd-gradient-start), var(--pd-gradient-end));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--pd-white);
  flex-shrink: 0;
}

.comment-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comment-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--pd-white);
}

.comment-date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

.comment-content {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ===== COMMENT FORM ===== */
.comment-form-title {
  font-size: 22px;
  font-weight: 700 !important;
  color: var(--pd-white);
  margin: 40px 0 20px 0;
}

.form-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  padding: 14px 20px;
  border-radius: var(--pd-btn-radius);
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.form-group label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 700;
}

.form-group input,
.form-group textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pd-btn-radius);
  padding: 12px 14px;
  color: var(--pd-white);
  font-size: 15px;
  font-family: var(--pd-font);
  font-weight: 500;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--pd-yellow);
}

.comment-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pd-btn-height);
  padding: 0 30px;
  border-radius: var(--pd-btn-radius);
  background: var(--pd-yellow);
  color: var(--pd-black);
  font-family: var(--pd-font);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}

.comment-submit-btn:hover {
  opacity: 0.9;
}

/* ===== SIDEBAR ===== */
.article-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

.sidebar-widget {
  background: var(--pd-bg-dark);
  border-radius: var(--pd-card-radius);
  padding: 24px;
  margin-bottom: 8px;
}

.widget-title {
  font-size: 18px;
  font-weight: 700 !important;
  color: var(--pd-yellow);
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

/* TOC */
.toc-nav a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 0;
  border-left: 2px solid transparent;
  padding-left: 14px;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.toc-nav a:hover,
.toc-nav a.active {
  color: var(--pd-yellow);
  border-left-color: var(--pd-yellow);
}

/* Popular posts */
.popular-post-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding-left 0.2s;
}

.popular-post-item:last-child {
  border-bottom: none;
}

.popular-post-item:hover {
  padding-left: 4px;
}

.popular-post-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--pd-card-radius);
  flex-shrink: 0;
}

.popular-post-content h4 {
  font-size: 13px;
  font-weight: 700 !important;
  color: var(--pd-white);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.popular-date {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* CTA Widget */
.cta-widget {
  background: linear-gradient(135deg, var(--pd-gradient-start), var(--pd-gradient-end));
}

.cta-content h3 {
  color: var(--pd-white);
  font-size: 18px;
  font-weight: 700 !important;
  margin: 0 0 8px 0;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter-form input {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--pd-btn-radius);
  padding: 12px 14px;
  color: var(--pd-white);
  font-size: 14px;
  font-family: var(--pd-font);
  font-weight: 500;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--pd-yellow);
}

.newsletter-form button {
  min-height: var(--pd-btn-height);
  padding: 0 24px;
  border-radius: var(--pd-btn-radius);
  background: var(--pd-yellow);
  color: var(--pd-black);
  font-family: var(--pd-font);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.newsletter-form button:hover {
  opacity: 0.9;
}

/* ===================================================================
   PRODUCT CARD INLINE
   =================================================================== */
.product-card-inline {
  background: var(--pd-bg-dark);
  border-radius: var(--pd-card-radius);
  overflow: hidden;
  margin: 40px 0;
  transition: transform 0.3s;
}

.product-card-inline:hover {
  transform: scale(1.01);
}

.product-inline-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
}

.product-inline-image {
  position: relative;
  background: var(--pd-black);
  overflow: hidden;
}

.product-inline-image a {
  display: block;
  height: 100%;
}

.product-inline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 260px;
  transition: transform 0.3s;
}

.product-card-inline:hover .product-inline-image img {
  transform: scale(1.03);
}

.product-inline-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.product-inline-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-inline-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(242, 255, 0, 0.12);
  color: var(--pd-yellow);
  padding: 4px 10px;
  border-radius: var(--pd-btn-radius);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  width: fit-content;
}

.product-inline-tag svg {
  width: 12px;
  height: 12px;
}

.product-inline-title {
  font-size: 22px;
  font-weight: 700 !important;
  color: var(--pd-white);
  line-height: 1.3;
  margin: 0;
}

.product-inline-title a {
  color: var(--pd-white);
  transition: color 0.2s;
}

.product-inline-title a:hover {
  color: var(--pd-yellow);
}

.product-inline-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.product-inline-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.star-filled,
.star-half {
  color: var(--pd-yellow);
}

.star-empty {
  color: rgba(242, 255, 0, 0.2);
}

.product-inline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.product-inline-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price-compare {
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  text-decoration: line-through;
  font-weight: 500;
}

.price-current {
  font-size: 28px;
  font-weight: 700;
  color: var(--pd-yellow);
}

.price-current.sale {
  color: var(--pd-yellow);
}

.price-discount {
  background: var(--pd-red);
  color: var(--pd-white);
  padding: 2px 8px;
  border-radius: var(--pd-btn-radius);
  font-size: 12px;
  font-weight: 700;
}

.product-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--pd-btn-height);
  padding: 0 30px;
  border-radius: var(--pd-btn-radius);
  background: var(--pd-yellow);
  color: var(--pd-black);
  font-family: var(--pd-font);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: opacity 0.2s;
}

.product-inline-btn:hover {
  opacity: 0.9;
}

.product-inline-features ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-inline-features li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.product-inline-features li svg {
  color: #10b981;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.product-inline-recommendation {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(242, 255, 0, 0.06);
  padding: 10px 16px;
  margin-top: 16px;
}

.product-inline-recommendation svg {
  color: #10b981;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.product-inline-recommendation span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

/* ===== BOGO PROMO ===== */
.product-inline-btn {
  white-space: nowrap;
}

.badge-bogo {
  background: var(--pd-yellow);
  color: var(--pd-black);
  box-shadow: 0 4px 18px rgba(242, 255, 0, 0.35);
  animation: bogo-glow 2.4s ease-in-out infinite;
}

@keyframes bogo-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(242, 255, 0, 0.25); }
  50% { box-shadow: 0 4px 24px rgba(242, 255, 0, 0.55); }
}

.product-inline-tag--promo {
  background: linear-gradient(135deg, var(--pd-gradient-start), var(--pd-gradient-end));
  color: var(--pd-white);
}

.price-bogo-chip {
  background: #10b981;
  color: var(--pd-white);
  padding: 2px 8px;
  border-radius: var(--pd-btn-radius);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: center;
}

.price-bogo-note {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.price-hero {
  font-size: 44px;
  font-weight: 700;
  color: var(--pd-yellow);
  line-height: 1;
  text-shadow: 0 0 28px rgba(242, 255, 0, 0.35);
}

.price-hero-unit {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 2px;
}

.price-was {
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  text-decoration: line-through;
  font-weight: 500;
}

.product-inline-footer--promo {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.product-inline-footer--promo .product-inline-price {
  align-items: baseline;
}

.product-inline-footer--promo .product-inline-btn {
  width: 100%;
}

@media (max-width: 750px) {
  .price-hero {
    font-size: 38px;
  }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 990px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
  }

  .articles-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-title {
    font-size: 48px;
  }

  .article-hero-title {
    font-size: 34px;
  }
}

@media (max-width: 750px) {
  .articles-grid,
  .related-grid {
    grid-template-columns: 1fr;
    gap: var(--pd-grid-gap-mobile);
  }

  .product-inline-container {
    grid-template-columns: 1fr;
  }

  .product-inline-image img {
    min-height: 200px;
  }

  .blog-title {
    font-size: 36px;
  }

  .article-hero-title {
    font-size: 28px;
  }

  .article-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .content-image-left,
  .content-image-right {
    float: none;
    max-width: 100%;
    margin: 20px 0;
  }

  .author-card-header {
    flex-direction: column;
    text-align: center;
  }

  .author-card-avatar {
    margin: 0 auto;
  }

  .author-social {
    justify-content: center;
  }

  .author-card-stats {
    justify-content: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .article-hero-meta {
    flex-wrap: wrap;
    gap: 12px;
  }

  .product-inline-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .product-inline-btn {
    width: 100%;
  }
}

/* --- /dozo/cart-drawer-dozo.css --- */
/* ============================================================================
   СТИЛИ ДРОВЕРА КОРЗИНЫ MEDUSA — ЖИВОЙ ИСТОЧНИК. Правьте ЭТОТ файл.
   ----------------------------------------------------------------------------
   Файл переехал сюда 2026-08-30 из public/theme/, потому что public/theme —
   ЗЕРКАЛО темы Shopify: local/scripts/copy-theme-assets.sh делает туда
   rsync -a --delete из PUREDOZO/theme/assets. Замер того же дня: копия в
   зеркале отличалась от темы Shopify на 583 строки, содержала 115 обращений к
   токенам --dz-* (в теме Shopify — ноль), а тема принесла бы обратно 13
   вхождений запрещённого брифом синего #5A75F8. То есть ЛЮБОЙ прогон
   синхронизации темы молча отменил бы весь редизайн корзины цикла 2 и стили
   order bump цикла 3 — и заметили бы это по внешнему виду, а не по ошибке.

   Это третье срабатывание одного и того же капкана: цикл 0 — dozo-features.json,
   цикл 2 — dozo-cart-rules.json, цикл 3 — этот файл. Правило прежнее: всё, чем
   владеет витрина Medusa, лежит ВНЕ public/theme.

   Подключается через local/scripts/sections-css-list.txt (/dozo/…), сторож
   пути — local/scripts/features-gate-check.mjs.
   ============================================================================ */

/* =============================================================
   DOZO Native Cart Drawer — M2
   M1: base drawer, items, qty/remove, subtotal, reward bar, consent, checkout
   M2: upsells (FBT), free gift block, trust badges
   Target: 1:1 with Monster Upsells visual audit (mu-cart-audit-mobile.png)
   Scoped to #dozo-cart-drawer-root to avoid conflicts with MU / Shopify default
   ============================================================= */

/* ----- Reset MU drawer on testovoya ----- */
#monster-cart-wrapper { display: none !important; }

/* Theme base.css hides ALL empty divs (div:empty{display:none}). Force-show our
   intentionally-empty styled boxes: overlay backdrop, reward-bar fill, spinner. */
#dozo-cart-overlay,
#dozo-cart-drawer-root .dz-reward-bar__fill,
#dozo-cart-drawer-root .dz-spinner { display: block; }
/* Недостигнутая веха — пустой div без галочки; без этого правила тема прятала
   её целиком (поймано снимком 2026-09-04: при 1 товаре точек не было). */
#dozo-cart-drawer-root .dz-reward-bar__dot { display: flex; }

/* ----- Overlay ----- */
#dozo-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#dozo-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ----- Drawer panel ----- */
/* «Стиль»-скин 2026-08-30. Файл — порт из темы Shopify и остаётся структурным
   источником; переписаны только цвета, радиусы, рамки и плотность, имена
   классов не тронуты. Все значения берутся из --dz-* (src/styles/dozo-tokens.css),
   поэтому цвет не может разъехаться между дровером и React-страницами. */
/* ★★ v3 «БЕЛЫЙ ДРОВЕР» 2026-09-04. Решение владельца на развилке «лавандовый в
   той же семье или совсем светлый»: «давай совсем светлый». Файл красится
   через var(--dz-*), поэтому светлая тема — ПЕРЕОБЪЯВЛЕНИЕ токенов в области
   дровера, а не второй набор правил: шапка остаётся фиолетовой (#210048, ниже
   явным цветом), всё остальное — белые карточки на #F6F3FB, текст #2A005E,
   жёлтый только заливкой кнопки Checkout (жёлтый ТЕКСТ на белом не читается,
   поэтому все места, где --dz-accent был цветом текста или рамки, ниже
   переведены на --dz-fg). Глобальные токены в src/styles/dozo-tokens.css не
   тронуты — остальные страницы по-прежнему тёмные. */
#dozo-cart-drawer-root {
  --dz-bg: #f6f3fb; /* тело дровера: белый с фиолетовым оттенком */
  --dz-bar: #ffffff; /* полоса доставки и футер; шапка задана явно ниже */
  --dz-card: #ffffff;
  --dz-tile: rgba(42, 0, 94, 0.06); /* чипы, дорожка прогресса, плашки */
  --dz-fg: #2a005e;
  --dz-fg-body: rgba(42, 0, 94, 0.85);
  --dz-fg-muted: rgba(42, 0, 94, 0.62);
  --dz-fg-faint: rgba(42, 0, 94, 0.45);
  --dz-line: rgba(42, 0, 94, 0.12);
  --dz-line-strong: rgba(42, 0, 94, 0.18);
  /* Розовый #f49bf9 на белом даёт контраст 1.6 — нечитаемо. Внутри дровера
     роль «магента текстом» играет --dz-rule #d623ed из того же брифа. */
  --dz-pink: #d623ed;
  --dz-cta-shadow: 0 1px 2px rgba(42, 0, 94, 0.18);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%; /* mobile: full screen */
  max-width: 100vw;
  background: var(--dz-bg, #f6f3fb);
  color: var(--dz-fg, #2a005e);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid var(--dz-line, rgba(255, 255, 255, 0.16));
  font-family: "chillax", "Outfit", sans-serif;
}

/* Тень рисуется ТОЛЬКО у открытого дровера. Закрытый стоит за краем экрана,
   но его тень доставала до страницы и красила 11 пикселей у правого края на
   каждой странице сайта — поймано попиксельным сравнением цикла 1 с циклом 2. */
#dozo-cart-drawer-root.is-open {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
}

@media screen and (min-width: 768px) {
  #dozo-cart-drawer-root {
    width: 440px; /* борд: 440px */
  }
}

/* ----- Header ----- */
.dz-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* 64 → 48. Владелец 2026-08-30 о верхе корзины: «у него высокая, большая
     высота слишком … чтобы все отображалось самым верху и компактно».
     Замер до правки: шапка 64 + полоса 136 = 200 px, то есть 24% экрана. */
  height: 48px;
  padding: 0 4px 0 16px;
  /* v3: единственная фиолетовая полоса светлого дровера — как шапка сайта. */
  background: #210048;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}
.dz-cart__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0;
}

.dz-cart__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 44px;   /* hit target >= 44px, при высоте шапки 48 всё ещё влезает */
  height: 44px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dz-cart__close:hover { color: #ffffff; }

/* ----- Reward / Goal bar ----- */
/* Было КАРТОЧКОЙ с борда: поля 16, рамка, радиус 20, текст, дорожка и ряд
   подписей — 136 px. Владелец 2026-08-30: «Лучше его на весь, ну, блок
   расположить, чтобы он как бы одной строчкой был». Стало лентой во всю
   ширину: текст слева, дорожка справа, обе в ОДНОЙ строке.
   ★ Ряд подписей («Free Shipping» / «Free Gift») убран: он повторял то, что
   сказано в самом тексте ленты. */
/* v3.1 2026-09-04 — владелец: «сделай понятнее, чтобы там были точки,
   обозначающие цель на графике». Текст сверху, шкала во всю ширину, на ней
   точка на каждую веху, подписи вех под шкалой. Было 40 px, стало ~66. */
.dz-reward-bar {
  display: block;
  margin: 0;
  padding: 6px 16px 7px;
  background: var(--dz-bar, #ffffff);
  border-bottom: 1px solid var(--dz-line, rgba(42, 0, 94, 0.12));
  flex-shrink: 0;
}

.dz-reward-bar__text {
  font-size: 13px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  text-align: left;
  margin-bottom: 0;
  min-height: 0;
  /* Однорядная лента: длинный текст обрезается, а не роняет вёрстку. Тексты
     сокращены в rules.ts, поэтому обрезка — страховка, а не рабочий режим. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.dz-reward-bar__text .dz-tier-emoji {
  margin-right: 6px;
}

/* Шкала: дорожка + точки поверх. Правый край с запасом под последнюю точку,
   чтобы её не резало краем дровера. */
.dz-reward-bar__scale {
  position: relative;
  margin: 5px 8px 0 0;
  height: 14px;
}
.dz-reward-bar__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 6px;
  background: var(--dz-tile, rgba(42, 0, 94, 0.06));
  border: 1px solid var(--dz-line-strong, rgba(42, 0, 94, 0.18));
  border-radius: 999px;
  overflow: hidden;
  box-sizing: border-box;
}
.dz-reward-bar__dot {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--dz-line-strong, rgba(42, 0, 94, 0.18));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.dz-reward-bar__dot.is-achieved {
  background: var(--dz-fg, #2a005e);
  border-color: var(--dz-fg, #2a005e);
}

.dz-reward-bar__fill {
  height: 100%;
  /* v3: заливка — брендовый градиент (тот же, что под пак-шотами). */
  background: linear-gradient(90deg, rgb(221, 75, 255), rgb(0, 105, 227));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

/* Подписи вех — под точками, центрированы по точке; последняя прижата к
   правому краю, чтобы не вылезать за дровер. */
.dz-reward-bar__markers {
  position: relative;
  height: 14px;
  margin: 3px 8px 0 0;
}
.dz-reward-bar__marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 14px;
  color: var(--dz-fg-muted, rgba(42, 0, 94, 0.62));
  font-weight: 600;
  white-space: nowrap;
}
.dz-reward-bar__marker.is-last {
  transform: translateX(-100%);
  padding-left: 0;
}
.dz-reward-bar__marker.is-unlocked {
  color: var(--dz-fg, #2a005e);
  font-weight: 700;
}

.dz-reward-bar__marker .dz-reward-check {
  color: var(--dz-success, #22a447);
  font-weight: 800;
}

/* ----- Scrollable body ----- */
.dz-cart__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}

/* ----- Empty state ----- */
.dz-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
}

.dz-cart__empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.dz-cart__empty-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--dz-fg-body, rgba(255, 255, 255, 0.92));
}

/* ----- Line items list ----- */
/* Каждая строка — своя карточка, поэтому список только расставляет промежутки. */
/* v3.1: строки на всю ширину, между ними разделитель — карточек с полями
   больше нет (владелец 2026-09-04: «чтобы всю ширину использовать»). */
.dz-cart__items {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ----- Single line item ----- */
/* v3.1 2026-09-04: строка во всю ширину; картинка — «линейка»: она
   растягивается ровно на высоту содержимого (align-items: stretch +
   absolute-картинка внутри), поэтому высота строки всегда равна высоте
   картинки — как просил владелец. Содержимое: название (переносится, не
   режется) · чип вкуса · цена + степпер ≈ 92 px при однострочном названии. */
/* 2026-09-08, направление A «Плотная таблица» (канвас, выбор владельца):
   картинка ФИКСИРОВАННАЯ 76×84 и не тянется за плашкой — «картинка зажимается
   и удлиняется, и только часть продукции видно … должна быть стандартного
   размера». Отменяет v3.1 «картинка = высота строки» (align-items: stretch).
   object-fit: contain — виден весь пак, подложка под ним — брендовый градиент. */
.dz-cart-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 16px;
  background: var(--dz-card, #ffffff);
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(42, 0, 94, 0.12));
  border-radius: 0;
  align-items: start;
}
.dz-cart-item__image-wrap {
  position: relative;
  width: 76px;
  height: 84px;
  align-self: start;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #2e005f);
}
.dz-cart-item__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dz-cart-item__details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}
/* Строка названия: название · «× N» · цена · корзинка. Отдельной нижней
   строки с ценой больше нет — это и даёт −36 px на плашке. */
.dz-cart-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}
.dz-cart-item__head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 18px;
}
/* Корзинка в строке названия: видимых 18 px, площадь нажатия 32 px за счёт
   отрицательных полей — строка не растёт. */
.dz-cart-item__head .dz-cart-item__trash {
  width: 32px;
  height: 32px;
  margin: -7px -10px -7px -6px;
}
.dz-cart-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-fg, #2a005e);
  line-height: 18px;
  word-break: break-word;
  min-width: 0;
  /* Длинное название переносится на вторую строку, не режется (v3.1). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-cart-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.dz-cart-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
/* Вкус — чипом, как на борде. */
.dz-cart-item__variant {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--dz-tile, rgba(42, 0, 94, 0.06));
  color: var(--dz-fg, #2a005e);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dz-cart-item__selling-plan {
  font-size: 12px;
  color: var(--dz-pink, #f49bf9);
  font-weight: 600;
}

.dz-cart-item__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 0;
  flex-shrink: 0;
}
.dz-cart-item__price {
  font-size: 16px;
  font-weight: 600;
  color: var(--dz-fg, #2a005e);
  font-family: "chillax", "Outfit", sans-serif;
}

.dz-cart-item__compare {
  font-size: 13px;
  color: var(--dz-fg-faint, rgba(255, 255, 255, 0.55));
  text-decoration: line-through;
  font-weight: 400;
}

.dz-cart-item__free {
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-success, #22a447);
}

.dz-cart-item__save-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-pink, #f49bf9);
  background: var(--dz-tile, #2e005f);
  border: 1px solid var(--dz-line-strong, rgba(255, 255, 255, 0.22));
  border-radius: var(--dz-r-ctl, 12px);
  padding: 0 8px;
  height: 24px;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.dz-cart-item__save-badge .dz-save-icon { flex-shrink: 0; }

/* qty stepper + trash col */
.dz-cart-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dz-cart-item__trash {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dz-fg-faint, rgba(42, 0, 94, 0.45));
  width: 36px;
  height: 36px;
  /* Стоит справа от степпера в строке цены; отрицательное поле прижимает её
     к краю строки. */
  margin: 0 -8px 0 0;
  padding: 0;
  flex: none; /* иначе flex-строка сжимала кнопку до 22 px на 390 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.dz-cart-item__trash:hover { color: var(--dz-fg, #2a005e); }

/* v3: степпер 40/28/40 — кнопки 40 px остаются целями касания, плашка
   помещается в две строки. */
.dz-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--dz-line-strong, rgba(42, 0, 94, 0.18));
  background: var(--dz-card, #ffffff);
  border-radius: 10px;
  overflow: hidden;
  height: 40px;
}
.dz-qty-stepper__btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.dz-qty-stepper__btn:hover { background: var(--dz-tile, rgba(42, 0, 94, 0.06)); }
.dz-qty-stepper__btn:disabled {
  color: var(--dz-fg-faint, rgba(255, 255, 255, 0.55));
  cursor: not-allowed;
}

.dz-qty-stepper__count {
  min-width: 28px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  padding: 0 4px;
  user-select: none;
}

/* Loading state for item row */
.dz-cart-item.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ----- Footer (fixed at bottom of drawer) ----- */
/* Замер до правки: низ 391 px — 46% экрана. Владелец 2026-08-30: «Checkout и
   под checkout три разные строчки. И это ужасно. Они невероятно много места
   занимают». */
.dz-cart__footer {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--dz-line, rgba(255, 255, 255, 0.16));
  flex-shrink: 0;
  background: var(--dz-bar, #210048);
}

/* ----- Savings row (shown only when discounted) ----- */
.dz-savings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dz-savings-row__label,
.dz-savings-row__amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-pink, #f49bf9);
}

/* ----- Subtotal row ----- */
.dz-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.dz-subtotal__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--dz-fg, #fff);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-subtotal__amount {
  font-size: 20px;
  font-weight: 600;
  color: var(--dz-fg, #fff);
}

/* Была отдельным абзацем на 23 px под подытогом. Стала припиской В строке
   подытога: смысл сохранён, высота — ноль. */
.dz-subtotal-note {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  white-space: nowrap;
}

/* ----- Consent checkbox ----- */
/* На бордах этого блока нет. Решение владельца 2026-08-30: «Оставить как есть» —
   предвыбранным и блокирующим кнопку чекаута. */
.dz-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.dz-consent__checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--dz-fg, #2a005e);
}
.dz-consent__label {
  font-size: 13px;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  line-height: 1.4;
  cursor: pointer;
}

.dz-consent__label a {
  color: var(--dz-fg, #2a005e);
  text-decoration: none;
  font-weight: 600;
}

.dz-consent__label a:hover { text-decoration: underline; }

/* ----- Одна строка вместо двух: доставка И доверие ----- */
/* Было два абзаца по 23 px («Ships in 1 business day» и «⭐ 4.8 (342k) |
   Secure Checkout»). Владелец 2026-08-30 назвал их среди «трёх разных
   строчек», которые «невероятно много места занимают». */
.dz-ship-line {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* ★ 11.5 → 10.5. При 11.5 склеенная строка не помещалась в 358 px и
     обрезалась С ОБЕИХ сторон (текст центрован): справа терялось «Secure
     Checkout», слева торчал огрызок «)». Замер снимком, а не на глаз. */
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dz-fg-body, rgba(255, 255, 255, 0.92));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-ship-line svg { flex-shrink: 0; }

/* Правила .dz-continue удалены вместе с кнопкой «Continue shopping»
   2026-08-31 (команда владельца): 49 px за действие, которое делают крестик и
   тап мимо дровера. */

/* ----- Header cart count ----- */
#dozo-cart-title-count { color: rgba(255, 255, 255, 0.75); font-weight: 600; }

/* ----- Checkout button ----- */
/* Плоская жёлтая, радиус 12, высота 56 — вариант A, выбранный владельцем.
   Без 3D-тени и без pill-радиуса. */
.dz-checkout-btn {
  display: block;
  width: 100%;
  background: var(--dz-accent, #f2ff00);
  color: var(--dz-on-accent, #2a005e);
  border: none;
  border-radius: var(--dz-r-ctl, 12px);
  height: 56px;
  font-size: 18px;
  font-weight: 600;
  font-family: "chillax", "Outfit", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: var(--dz-cta-shadow, 0 1px 2px rgba(42, 0, 94, 0.18));
  transition: opacity 0.15s;
  text-align: center;
}

.dz-checkout-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.dz-checkout-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dz-checkout-btn.is-processing {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ----- Trust line ----- */
.dz-trust-line {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  font-weight: 500;
}

.dz-trust-line .dz-star {
  color: var(--dz-gold, #ffd400);
}

/* ----- Loading spinner overlay on drawer (initial fetch) ----- */
.dz-cart__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.dz-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--dz-line-strong, rgba(42, 0, 94, 0.18));
  border-top-color: var(--dz-fg, #2a005e);
  border-radius: 50%;
  animation: dz-spin 0.7s linear infinite;
}

@keyframes dz-spin {
  to { transform: rotate(360deg); }
}

/* ----- Cart icon bubble update ----- */
#cart-icon-bubble .cart-count-bubble {
  transition: transform 0.2s ease;
}

/* ----- Error toast ----- */
.dz-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #e53;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  white-space: nowrap;
}

.dz-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================================
   M2 NEW STYLES
   ===================================================================== */

/* ----- Подарочная строка ----- */
/* ★★ Было `background: #f8fff8` — почти белая карточка. Стиль портирован из
   темы Shopify под СВЕТЛЫЙ фон и в Medusa не показывался ни разу: подарка не
   существовало до 2026-08-31, пока не появился механизм «3+1». Как только он
   заработал, строка вышла на экран нечитаемой — белый текст темы на белой
   карточке. Найдено снимком, ворота 16 из 16 об этом молчали: они меряют
   деньги и состав, а не читаемость.
   Стало: тёмная плашка в цвет темы с зелёной рамкой — подарок по-прежнему
   выделен, текст остаётся белым и читается. */
.dz-cart-item.is-gift {
  background: rgba(34, 164, 71, 0.08);
  box-shadow: inset 3px 0 0 var(--dz-success, #22a447);
}

/* ----- Kill Monster Upsells overlay (belt-and-suspenders) ----- */
[class*="monster_upsell_overlay"],[class*="monster-upsell-overlay"],#monster-cart-wrapper{display:none!important;visibility:hidden!important;}

/* Чип в строке вкуса, той же высоты, что чип вкуса. */
.dz-cart-item__gift-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  background: var(--dz-success, #22a447);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 0 8px;
  border-radius: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* static qty chip on gift lines (no stepper there) */
.dz-gift-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 34px;
  padding: 0 8px;
  border: 1.5px solid var(--dz-success, #22a447);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #22a447;
  user-select: none;
}

/* ----- Gift teaser block ----- */
/* v3.1: подарок-тизер — та же строка, что и товар: картинка-линейка, текст,
   на всю ширину, разделитель снизу. */
#dozo-gift-block {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(42, 0, 94, 0.12));
  border-radius: 0;
  padding: 0;
  background: var(--dz-card, #ffffff);
}
.dz-gift-teaser__card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 10px 16px;
  align-items: stretch;
}
.dz-gift-teaser__img-wrap {
  position: relative;
  width: 76px;
  min-height: 64px;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #2e005f);
}
.dz-gift-teaser__img,
.dz-gift-teaser__img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: transparent;
}
.dz-gift-teaser__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.dz-gift-teaser__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-fg, #2a005e);
  line-height: 1.3;
}
.dz-gift-teaser__header {
  font-size: 12px;
  font-weight: 500;
  color: var(--dz-fg-muted, rgba(42, 0, 94, 0.62));
  margin: 0;
}

.dz-gift-teaser__price {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-gift-teaser__compare {
  font-size: 12px;
  color: var(--dz-fg-faint, rgba(255,255,255,.55));
  text-decoration: line-through;
}

.dz-gift-teaser__free {
  font-size: 13px;
  font-weight: 700;
  color: var(--dz-success, #22a447);
}

/* ----- Upsell (FBT) section ----- */
/* v3.1: апселлы — те же строки на всю ширину, что и товары; заголовок —
   плоская полоска-кикер, не карточка. */
#dozo-upsell-section {
  margin: 0;
  border-top: 0;
  padding: 0;
}
.dz-upsell__heading {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dz-fg-muted, rgba(42, 0, 94, 0.62));
  margin: 0;
  text-align: left;
  background: var(--dz-tile, rgba(42, 0, 94, 0.06));
  border-radius: 0;
  padding: 7px 16px;
}
.dz-upsell__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}
.dz-upsell-card {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: stretch;
  gap: 12px;
  background: var(--dz-card, #ffffff);
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(42, 0, 94, 0.12));
  border-radius: 0;
  padding: 10px 16px;
}
.dz-upsell-card--loading {
  height: 84px;
  background: linear-gradient(90deg, var(--dz-card, #ffffff) 25%, var(--dz-tile, rgba(42, 0, 94, 0.06)) 50%, var(--dz-card, #ffffff) 75%);
  background-size: 200% 100%;
  animation: dz-shimmer 1.2s ease infinite;
  border: none;
}

@keyframes dz-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dz-upsell-card__img-wrap {
  position: relative;
  width: 76px;
  min-height: 64px;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #2e005f);
}
.dz-upsell-card__img,
.dz-upsell-card__img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: transparent;
}
.dz-upsell-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.dz-upsell-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dz-fg, #2a005e);
  line-height: 1.3;
  word-break: break-word;
}

.dz-upsell-card__price-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.dz-upsell-card__compare {
  font-size: 11px;
  color: var(--dz-fg-faint, rgba(255,255,255,.55));
  text-decoration: line-through;
}

.dz-upsell-card__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-fg, #2a005e);
  font-family: "chillax", "Outfit", sans-serif;
}

.dz-upsell-card__details {
  font-size: 11px;
  color: var(--dz-fg-muted, rgba(42, 0, 94, 0.62));
  text-decoration: underline;
  font-weight: 500;
  margin-top: 1px;
  display: inline-block;
}

.dz-upsell-card__add-btn {
  background: var(--dz-card, #ffffff);
  color: var(--dz-fg, #2a005e);
  border: 1.5px solid var(--dz-fg, #2a005e);
  border-radius: 10px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  font-family: "chillax", "Outfit", sans-serif;
  flex-shrink: 0;
  align-self: center;
}

.dz-upsell-card__add-btn:hover { background: var(--dz-fg, #2a005e); color: #ffffff; }
.dz-upsell-card__add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Payment / trust badge cards (footer bottom) ----- */
#dozo-trust-section {
  margin-top: 8px;
}

.dz-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
}

.dz-trust-badge {
  /* Чипов теперь ЧЕТЫРЕ: Lab-tested и Discreet убраны 2026-08-31 по команде
     владельца — они повторяли строку доверия над ними. Высота 44 → 32:
     это не кнопки, нажимать их не надо, требование к площади нажатия к ним
     не относится. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--dz-line-strong, rgba(255,255,255,.22));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  background: var(--dz-card, #1e0045);
}

.dz-trust-badge--brand {
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.01em;
  font-size: 13px;
  color: var(--dz-fg, #fff);
}

.dz-trust-badge__label {
  font-size: 9.5px;
  white-space: nowrap;
  color: var(--dz-fg-muted, rgba(255,255,255,.7));
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}


/* ----- Save-my-cart box (email capture for anonymous baskets) ----- */
.dz-save-cart {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--dz-line, rgba(42, 0, 94, 0.12));
  border-radius: 12px;
  background: var(--dz-card, #ffffff);
}

.dz-save-cart__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  margin-bottom: 6px;
}

.dz-save-cart__row { display: flex; gap: 6px; }

.dz-save-cart__input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid var(--dz-line-strong, rgba(42, 0, 94, 0.18));
  border-radius: 8px;
  background: #ffffff;
  color: var(--dz-fg, #2a005e);
}

.dz-save-cart__input[aria-invalid="true"] { border-color: #e53; }

.dz-save-cart__btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: var(--dz-fg, #2a005e);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.dz-save-cart__btn:disabled { opacity: 0.6; cursor: default; }

.dz-save-cart__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--dz-fg-body, rgba(255,255,255,.92));
  cursor: pointer;
}

.dz-save-cart__opt input { accent-color: var(--dz-fg, #2a005e); }

.dz-save-cart__error { margin: 6px 0 0; font-size: 12px; color: #e53; }

.dz-save-cart__done {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #22a447;
}

/* ----- Returning-visitor cart reminder ----- */
.dz-reminder {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 14px;
  background: #111;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.dz-reminder__text { flex: 1; min-width: 0; }

.dz-reminder__btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  background: var(--dz-card, #1e0045);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.dz-reminder__close {
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  color: #aaa;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ----- Order bump в корзине («Add one more — save $N on the second») -----
   Рисуется только когда сервер прислал включённый флаг order_bump. */
.dz-bump {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  background: var(--dz-card, #ffffff);
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(42, 0, 94, 0.12));
  border-radius: 0;
}
.dz-bump__thumb {
  position: relative;
  width: 76px;
  min-height: 64px;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #2e005f);
}
.dz-bump__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-bump__body { align-self: center; }
.dz-bump__btn { align-self: center; }

.dz-bump__body { min-width: 0; }

.dz-bump__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  line-height: 1.3;
}

/* Магента — только текстом, заливок ею на тёмном бриф не разрешает. */
.dz-bump__save { color: var(--dz-pink, #f49bf9); }

.dz-bump__note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  line-height: 1.35;
}

.dz-bump__btn {
  min-width: 72px;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  /* v3: на белом вторичная кнопка — фиолетовый контур, жёлтый контур не виден. */
  border: 1.5px solid var(--dz-fg, #2a005e);
  border-radius: 10px;
  color: var(--dz-fg, #2a005e);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dz-bump__btn:hover:not(:disabled) {
  background: var(--dz-fg, #2a005e);
  color: #ffffff;
}

.dz-bump__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Order bump, цикл 3: карточка предлагает КОНКРЕТНЫЙ товар по цене,
   которую посчитал сервер (метаполе bump_price_cents на варианте), и умеет
   показать, что позиция уже добавлена, с возможностью снять её. ----- */

.dz-bump__price {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.35;
}

.dz-bump__now {
  font-size: 15px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
}

.dz-bump__was {
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  text-decoration: line-through;
}

/* Состояние «уже в корзине»: кнопка перестаёт звать и начинает отпускать. */
.dz-bump.is-added {
  border-color: var(--dz-line-strong, rgba(255, 255, 255, 0.28));
}

.dz-bump__btn--remove {
  border-color: var(--dz-line-strong, rgba(255, 255, 255, 0.28));
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
}

.dz-bump__btn--remove:hover:not(:disabled) {
  background: transparent;
  border-color: var(--dz-fg, #fff);
  color: var(--dz-fg, #fff);
}

@media (max-width: 480px) {
  .dz-bump { grid-template-columns: 44px 1fr; row-gap: 10px; }
  .dz-bump__btn { grid-column: 1 / -1; width: 100%; }
}

/* ═══ Одна плашка на товар (владелец 2026-09-07) ═══════════════════════════
   «должен быть один товар, количество должно быть три. И там должно указано
   быть три разных вкуса … всё как бы в одном товаре, одна строчка занята».
   Строки Medusa (по варианту) свёрнуты в плашку товара: заголовок с «× N»,
   строка на каждый вкус со своим мини-степпером, внизу сумма и корзинка. */
.dz-cart-item__head {
  align-items: center;
}
.dz-cart-item__qty-total {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--dz-tile, rgba(42, 0, 94, 0.06));
  color: var(--dz-fg, #2a005e);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
/* «× N» подарка — зелёный, как его цена и бейдж. */
.dz-cart-item__qty-total--gift {
  background: rgba(34, 164, 71, 0.12);
  border: 1.5px solid var(--dz-success, #22a447);
  color: var(--dz-success, #22a447);
  height: 22px;
  box-sizing: border-box;
}
.dz-cart-item__flavors {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dz-cart-item__flavor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  height: 28px;
}
.dz-cart-item__flavor.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.dz-cart-item__flavor .dz-cart-item__variant {
  flex: 1 1 auto;
  min-width: 0;
}
/* Пустой чип у одновариантного товара — держит степпер справа, сам не виден.
   ★ Тема прячет пустые div (div:empty), поэтому это span с display:flex. */
.dz-cart-item__variant--blank {
  display: flex;
  background: transparent;
  padding: 0;
}
.dz-qty-stepper--mini {
  height: 28px;
  border-radius: 8px;
}
.dz-qty-stepper--mini .dz-qty-stepper__btn {
  width: 30px;
  height: 28px;
  font-size: 16px;
}
.dz-qty-stepper--mini .dz-qty-stepper__count {
  min-width: 22px;
  font-size: 14px;
}
.dz-cart-item__each {
  font-size: 12px;
  font-weight: 500;
  color: var(--dz-fg-muted, rgba(42, 0, 94, 0.62));
  white-space: nowrap;
}

/* ═══ Подарочная плашка акции (1+1 / 2+1 / 3+1) ═══════════════════════════
   Владелец 2026-09-07: «бесплатные … обязательно должна быть какая-то
   анимация, сама строчка должна выглядеть, что это бесплатное, другие цвета …
   цена должна быть ноль … понятно, что типа подарок добавлен. Это важно».
   Плашка — зелёная подложка с брендовым отливом, зелёная полоса слева, ярлык
   на картинке, бейдж «FREE · BUY 1 GET 1» с бликом, «$0.00» и зачёркнутая
   стоимость подарка, «You save $X». При появлении — въезд и двойная зелёная
   пульсация. Текст остаётся тёмным: контраст ≥ 4.5:1 держат ворота
   cart-drawer-measure. */
.dz-cart-item.is-free-unit {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(34, 164, 71, 0.16),
    rgba(34, 164, 71, 0.06) 62%,
    rgba(214, 35, 237, 0.06)
  );
  box-shadow: inset 3px 0 0 var(--dz-success, #22a447);
}
.dz-cart-item.is-free-unit .dz-cart-item__image-wrap {
  outline: 2px solid var(--dz-success, #22a447);
  outline-offset: -2px;
}
.dz-cart-item__gift-ribbon {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--dz-success, #22a447);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dz-cart-item__gift-badge {
  position: relative;
  overflow: hidden;
  gap: 5px;
}
.dz-cart-item__gift-badge svg {
  flex-shrink: 0;
}
/* Медленный блик по бейджу — «это подарок» видно и после въезда. */
.dz-cart-item__gift-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: dz-badge-shine 3.2s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.dz-cart-item.is-free-unit .dz-cart-item__free {
  font-size: 16px;
  font-family: "chillax", "Outfit", sans-serif;
}
.dz-cart-item__gift-saved {
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-success, #22a447);
  white-space: nowrap;
  margin-left: auto;
}
.dz-cart-item.is-free-unit .dz-gift-qty {
  height: 24px;
  min-width: 0;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(34, 164, 71, 0.12);
}
.dz-cart-item.is-just-added {
  animation:
    dz-gift-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    dz-gift-glow 1.1s ease-in-out 0.45s 2;
}
@keyframes dz-gift-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dz-gift-glow {
  0%,
  100% {
    box-shadow:
      inset 3px 0 0 var(--dz-success, #22a447),
      0 0 0 0 rgba(34, 164, 71, 0);
  }
  50% {
    box-shadow:
      inset 3px 0 0 var(--dz-success, #22a447),
      0 0 0 5px rgba(34, 164, 71, 0.24);
  }
}
@keyframes dz-badge-shine {
  0% {
    transform: translateX(-120%);
  }
  35%,
  100% {
    transform: translateX(120%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dz-cart-item.is-just-added {
    animation: none;
  }
  .dz-cart-item__gift-badge::after {
    animation: none;
    display: none;
  }
}

/* ── FBT «Frequently Bought Together» (2026-09-08) ─────────────────────────
   Карточка предложения: зачёркнутая обычная цена, цена −N%, чип «Save N%».
   Плашка FBT-строки в корзине: бейдж «Bought together · Save $X (N%)»,
   «+» у такой строки выключен — скидка ровно на одну штуку. */
#dozo-cart-drawer-root .dz-upsell-card__save {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(34, 164, 71, 0.14);
  color: #15803d;
  white-space: nowrap;
}
#dozo-cart-drawer-root .dz-cart-item[data-fbt="1"] .dz-cart-item__save-badge {
  background: rgba(34, 164, 71, 0.14);
  color: #15803d;
}
#dozo-cart-drawer-root .dz-qty-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --- /dozo/checkout.css --- */
/* КАССА ПО КАНВАСУ «СТИЛЬ» (2026-09-08).
 * Борды: design-audit-2026-08-22/canvas/CheckoutStyleOnepageDesktop.dc.html
 * (1440×1700) и CheckoutStyleOnepageMobile.dc.html (390×2400). Числа ниже
 * сняты с бордов; мобильные значения — базовые, десктопные — от 1024.
 *
 * ★ Только классы dz-ck-*. Тема Shopify объявляет `.grid` и `.hidden` с
 * !important и перебивает утилиты Tailwind (замер 2026-08-30: сводки заказа
 * на кассе не было вовсе). Своих имён тема не знает и знать не может.
 *
 * Шрифты: типографика зеркала (typography.css) красит всё Outfit'ом, а
 * h2 и класс .dz-display — Chillax. Здесь шрифт нигде не назначается
 * напрямую: заголовки — <h2>, кнопка и итог носят .dz-display.
 *
 * Файл едет в sections-bundle.css (scripts/sections-css-list.txt) и в
 * отпечаток ?v= (scripts/stamp-dozo-css-version.mjs, NAMES).
 */

/* ── Показ по ширине. Только прячем; сам display элемент задаёт себе. ──── */
@media (max-width: 1023px) {
  .dz-ck .dz-ck-desk { display: none; }
}
@media (min-width: 1024px) {
  .dz-ck .dz-ck-mob { display: none; }
}

/* ── Корень ─────────────────────────────────────────────────────────────── */
.dz-ck {
  --dz-ck-pad: clamp(24px, calc((100vw - 1200px) / 2), 120px);
  background: var(--dz-bg);
  color: var(--dz-fg);
  min-height: 100vh;
}
.dz-ck *,
.dz-ck *::before,
.dz-ck *::after {
  box-sizing: border-box;
}
.dz-ck a { color: var(--dz-accent); }
.dz-ck-contents { display: contents; }
.dz-ck-muted { font-size: 13px; color: var(--dz-fg-muted); }

/* ── Шапка: логотип + «Secure checkout» ─────────────────────────────────── */
.dz-ck-head {
  background: var(--dz-bar);
  border-bottom: 1px solid var(--dz-line);
}
.dz-ck-head__in {
  max-width: 1440px;
  margin: 0 auto;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dz-ck-logo { display: block; height: 36px; width: auto; }
.dz-ck-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dz-fg);
}
.dz-ck-secure svg { width: 18px; height: 18px; }

/* ── Мобильная полоса «Show order summary · $N» ─────────────────────────── */
.dz-ck-mbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--dz-card);
  border: 0;
  border-bottom: 1px solid var(--dz-line);
  color: var(--dz-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dz-ck-mbar__l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dz-accent);
  font-size: 14px;
  font-weight: 600;
}
.dz-ck-mbar__l svg { flex: none; }
.dz-ck-mbar__l svg:first-child { width: 20px; height: 20px; }
.dz-ck-mbar__l svg:last-child { width: 18px; height: 18px; }
.dz-ck-mbar__t { font-size: 16px; font-weight: 700; }
.dz-ck-mpanel {
  background: var(--dz-card);
  border-bottom: 1px solid var(--dz-line);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Контейнер и колонки ────────────────────────────────────────────────── */
.dz-ck-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 16px 0;
}
.dz-ck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.dz-ck-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.dz-ck-side { min-width: 0; }

/* ── Секция формы ───────────────────────────────────────────────────────── */
.dz-ck-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.dz-ck-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
}
.dz-ck-h2 {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--dz-fg);
}
.dz-ck-aside {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--dz-fg-muted);
  white-space: nowrap;
}
.dz-ck-aside svg { width: 16px; height: 16px; flex: none; }
.dz-ck-link {
  color: var(--dz-accent);
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.dz-ck-stack { display: flex; flex-direction: column; gap: 8px; }

/* ── Поле с плавающей меткой ────────────────────────────────────────────── */
.dz-ck-field { position: relative; min-width: 0; }
.dz-ck-field__box {
  position: relative;
  height: 48px;
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: var(--dz-r-ctl);
  transition: border-color 0.15s;
}
.dz-ck-field:focus-within .dz-ck-field__box { border-color: var(--dz-accent); }
.dz-ck-field.is-invalid .dz-ck-field__box { border-color: #ff8a8a; }
.dz-ck-field__ctl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 18px 14px 4px;
  background: transparent;
  border: 0;
  border-radius: inherit;
  outline: none;
  box-shadow: none;
  font-size: 16px; /* меньше 16 — iPhone зумит страницу при фокусе */
  line-height: 1.3;
  color: var(--dz-fg);
  -webkit-appearance: none;
  appearance: none;
}
.dz-ck-field__ctl::placeholder { color: transparent; }
.dz-ck-field__ctl:-webkit-autofill,
.dz-ck-field__ctl:-webkit-autofill:hover,
.dz-ck-field__ctl:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dz-tile) inset;
  -webkit-text-fill-color: var(--dz-fg);
  caret-color: var(--dz-fg);
  transition: background-color 9999s ease-out;
}
/* ★ (0,4,1) и здесь: в Firefox тот же стартерный файл компилируется в
   `input:not(…):not(:-moz-placeholder) ~ label` — устаревший псевдокласс не
   совпадает никогда, поэтому 10px там красили и ПУСТУЮ метку
   (замер Camoufox 2026-09-08 на medusa-pd). */
.dz-ck .dz-ck-field .dz-ck-field__box > .dz-ck-field__ctl ~ .dz-ck-field__lab,
.dz-ck-field__lab {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--dz-fg-faint);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: top 0.12s, font-size 0.12s, transform 0.12s;
}
/* ★ Специфичность (0,4,1) не случайна: globals.css витрины (стартер Medusa)
   держит своё правило плавающей метки
   `input:not([type=radio]):not([type=checkbox]):not(:placeholder-shown) ~ label`
   с весом (0,3,2) и кеглем 10px — оно перебивало наши 11px/16px
   (замер 2026-09-08 на :8001). */
.dz-ck .dz-ck-field__box .dz-ck-field__ctl:focus ~ .dz-ck-field__lab,
.dz-ck .dz-ck-field__box .dz-ck-field__ctl:not(:placeholder-shown) ~ .dz-ck-field__lab,
.dz-ck .dz-ck-field.is-filled .dz-ck-field__box .dz-ck-field__lab {
  top: 8px;
  transform: none;
  font-size: 11px;
  line-height: 1;
  color: var(--dz-fg-muted);
}
.dz-ck-field--select .dz-ck-field__ctl { padding-right: 40px; cursor: pointer; }
.dz-ck-field--select .dz-ck-field__ctl option { color: #1f2b50; background: #fff; }
.dz-ck-field__chev {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.7);
}
.dz-ck-field__adorn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.65);
}
.dz-ck-field__adorn svg { width: 18px; height: 18px; }
.dz-ck-field--adorn .dz-ck-field__ctl { padding-right: 120px; }
.dz-ck-field--adorn .dz-ck-field__lab { right: 120px; }
.dz-ck-field--adorn-sm .dz-ck-field__ctl { padding-right: 44px; }
.dz-ck-field--adorn-sm .dz-ck-field__lab { right: 44px; }
.dz-ck-err {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #ff8a8a;
}
.dz-ck-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font-size: 13px;
  color: var(--dz-fg-muted);
}
.dz-ck-hint svg { flex: none; width: 14px; height: 14px; }

/* Ряды полей. */
.dz-ck-row2,
.dz-ck-row3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dz-ck-row3 > :first-child { grid-column: 1 / -1; } /* город во всю ширину */

/* ── Строка выбора (доставка, другой способ оплаты) ─────────────────────── */
.dz-ck-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: var(--dz-r-ctl);
  color: var(--dz-fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.dz-ck-choice:hover { border-color: var(--dz-accent); }
.dz-ck-choice.is-selected {
  border: 2px solid var(--dz-accent);
  background: var(--dz-selected-bg);
  padding: 7.5px 13.5px;
}
.dz-ck-radio {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dz-ck-radio i {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dz-accent);
}
.dz-ck-radio.is-on { border-color: var(--dz-accent); }
.dz-ck-radio.is-on i { display: block; }
.dz-ck-choice__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}
.dz-ck-choice__t { font-size: 15px; font-weight: 700; line-height: 1.2; }
.dz-ck-choice__s { font-size: 13px; color: var(--dz-fg-muted); line-height: 1.3; }
.dz-ck-choice__p {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.dz-ck-choice__p s { color: var(--dz-fg-muted); font-weight: 500; }

/* ── Оплата: карточка с жёлтой рамкой ───────────────────────────────────── */
.dz-ck-pay {
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-card);
  border-radius: var(--dz-r-card);
  overflow: hidden;
}
.dz-ck-pay.is-selected { border-color: var(--dz-accent); }
.dz-ck-pay__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  background: var(--dz-tile);
  border: 0;
  color: var(--dz-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dz-ck-pay__t { font-size: 15px; font-weight: 600; }
.dz-ck-pay__chips { margin-left: auto; display: none; }
.dz-ck-pay__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--dz-line);
  background: var(--dz-card);
}
/* Единственный способ оплаты на мобильном — без обёртки, как на борде. */
@media (max-width: 1023px) {
  .dz-ck-pay.is-solo { border: 0; border-radius: 0; background: transparent; }
  .dz-ck-pay.is-solo .dz-ck-pay__head { display: none; }
  .dz-ck-pay.is-solo .dz-ck-pay__body { padding: 0; border-top: 0; background: transparent; }
}
.dz-ck-chips { display: inline-flex; gap: 4px; }
.dz-ck-chip {
  display: inline-block;
  border: 1px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--dz-fg);
  white-space: nowrap;
}
.dz-ck-note-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--dz-fg-muted);
}
.dz-ck-note-sm svg { flex: none; width: 16px; height: 16px; }

/* Чекбокс: настоящий <input> лежит поверх квадрата и ловит клик. */
.dz-ck-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dz-fg-body);
  cursor: pointer;
}
.dz-ck-check__box {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dz-on-accent);
  transition: background-color 0.12s, border-color 0.12s;
}
.dz-ck-check__box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
.dz-ck-check__box svg { display: none; width: 12px; height: 12px; }
.dz-ck-check__box input:checked + svg { display: block; }
.dz-ck-check__box:has(input:checked) {
  background: var(--dz-accent);
  border-color: var(--dz-accent);
}
.dz-ck-check__box:has(input:focus-visible) {
  outline: 2px solid var(--dz-accent);
  outline-offset: 2px;
}
.dz-ck-check__lab .dz-ck-muted { margin-left: 2px; }
.dz-ck-billing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--dz-line-strong);
  background: var(--dz-card);
  border-radius: var(--dz-r-ctl);
}
.dz-ck-billing__t { font-size: 14px; font-weight: 600; }

/* ── Order bump ─────────────────────────────────────────────────────────── */
.dz-ck-bump {
  display: grid;
  grid-template-columns: 24px 56px minmax(0, 1fr);
  grid-template-areas:
    "chk img t"
    "p p p"
    "tag tag tag";
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  padding: 16px;
  border: 1.5px solid var(--dz-accent);
  background: var(--dz-card);
  border-radius: 16px;
  cursor: pointer;
}
.dz-ck-bump.is-busy { opacity: 0.7; pointer-events: none; }
.dz-ck-bump__chk { grid-area: chk; width: 24px; height: 24px; border-radius: 6px; }
.dz-ck-bump__chk svg { width: 14px; height: 14px; }
.dz-ck-bump__img {
  grid-area: img;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile);
}
.dz-ck-bump__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dz-ck-bump__t { grid-area: t; font-size: 15px; font-weight: 700; line-height: 1.3; }
.dz-ck-bump__p { grid-area: p; font-size: 14px; line-height: 1.4; color: var(--dz-fg-body); }
.dz-ck-bump__p b { color: var(--dz-accent); font-weight: 700; }
.dz-ck-bump__p s { color: var(--dz-fg-faint); }
.dz-ck-bump__tag {
  grid-area: tag;
  justify-self: end;
  background: var(--dz-tile);
  border: 1px solid var(--dz-line-strong);
  color: var(--dz-pink);
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* ── Кнопка, ошибки, строки доверия ─────────────────────────────────────── */
.dz-ck-after { display: flex; flex-direction: column; gap: 14px; }
.dz-ck-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--dz-r-ctl);
  background: var(--dz-accent);
  color: var(--dz-on-accent);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--dz-cta-shadow);
  cursor: pointer;
  transition: opacity 0.15s;
}
.dz-ck-submit:hover { opacity: 0.92; }
.dz-ck-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.dz-ck-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--dz-on-accent);
  border-top-color: transparent;
  animation: dz-ck-spin 0.8s linear infinite;
}
@keyframes dz-ck-spin { to { transform: rotate(360deg); } }
.dz-ck-alert {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #ff8a8a;
  border-radius: var(--dz-r-ctl);
  color: #ff8a8a;
  font-size: 14px;
}
.dz-ck-alert--warn { border-color: var(--dz-accent); color: var(--dz-accent); }
.dz-ck-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--dz-fg-muted);
}
.dz-ck-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}
.dz-ck-trust svg { flex: none; width: 15px; height: 15px; }
.dz-ck-trust .is-strong { color: var(--dz-fg-body); font-weight: 500; }

/* ── Сводка заказа ──────────────────────────────────────────────────────── */
.dz-ck-sum {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--dz-card);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-card);
}
.dz-ck-sum__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
}
.dz-ck-sum__title { font-size: 16px; font-weight: 700; }
.dz-ck-items { display: flex; flex-direction: column; gap: 12px; }
.dz-ck-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dz-ck-item__thumb { position: relative; display: block; width: 64px; height: 64px; flex: none; }
.dz-ck-item__img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid var(--dz-line);
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile);
}
.dz-ck-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dz-ck-item__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--dz-accent);
  color: var(--dz-on-accent);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dz-ck-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dz-ck-item__t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dz-ck-item__s { font-size: 13px; color: var(--dz-fg-muted); }
.dz-ck-item__p { flex: none; font-size: 15px; font-weight: 700; }

.dz-ck-ship {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--dz-tile);
  border: 1px solid var(--dz-line-strong);
  border-radius: var(--dz-r-ctl);
}
.dz-ck-ship__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 20px;
}
.dz-ck-ship__msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-pink);
}
.dz-ck-ship__msg svg { flex: none; width: 18px; height: 18px; }
.dz-ck-ship__of { font-size: 12px; color: var(--dz-fg-muted); white-space: nowrap; }
.dz-ck-ship__bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
/* <span>, не <div>: тема прячет пустые div (div:empty{display:none}). */
.dz-ck-ship__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--dz-accent);
  transition: width 0.3s;
}

.dz-ck-code {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--dz-line);
  border-bottom: 1px solid var(--dz-line);
}
.dz-ck-code__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dz-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.dz-ck-code__row u { text-decoration: underline; }
.dz-ck-code__row svg { flex: none; width: 20px; height: 20px; }
.dz-ck-code__form { display: flex; gap: 8px; }
.dz-ck-code__form .dz-ck-field { flex: 1; min-width: 0; }
.dz-ck-code__apply {
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  border: 1.5px solid var(--dz-accent);
  background: transparent;
  color: var(--dz-accent);
  border-radius: var(--dz-r-ctl);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.dz-ck-code__apply:disabled { opacity: 0.5; cursor: not-allowed; }
.dz-ck-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dz-ck-tag {
  border: 1px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dz-pink);
}
.dz-ck-tags button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--dz-fg-muted);
  text-decoration: underline;
  cursor: pointer;
}

.dz-ck-tot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--dz-fg-body);
}
.dz-ck-tot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
}
.dz-ck-tot__row > span:last-child { font-weight: 600; color: var(--dz-fg); }
.dz-ck-tot__row.is-accent > span:last-child { color: var(--dz-pink); }
.dz-ck-tot__grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dz-line);
}
.dz-ck-tot__grand > span:first-child { font-size: 16px; font-weight: 700; color: var(--dz-fg); }
.dz-ck-tot__amt { display: inline-flex; align-items: baseline; gap: 8px; }
.dz-ck-tot__cur { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.dz-ck-tot__val { font-size: 22px; font-weight: 600; color: var(--dz-accent); }

/* Мини-итоги на мобильном — перед бампом и кнопкой. */
.dz-ck-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--dz-card);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-card);
}
.dz-ck-mini .dz-ck-code { border-top: 0; padding-top: 0; }

/* Чипы «в каждом заказе» — мобильная панель сводки. */
.dz-ck-mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-ck-mchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  background: var(--dz-tile);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-ctl);
  color: var(--dz-fg-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.dz-ck-mchip svg { flex: none; width: 16px; height: 16px; }

/* ── Правая колонка: подпись и карточки ─────────────────────────────────── */
.dz-ck-note {
  margin: 16px 0 0;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dz-fg-muted);
  text-align: center;
}
.dz-ck-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding: 24px;
  background: var(--dz-card);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-card);
}
.dz-ck-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dz-fg-muted);
}
.dz-ck-inc { display: flex; align-items: flex-start; gap: 12px; }
.dz-ck-inc svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--dz-accent); }
.dz-ck-inc__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dz-ck-inc__t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.dz-ck-inc__n { font-size: 13px; line-height: 1.4; color: var(--dz-fg-muted); }
.dz-ck-card__t { font-size: 16px; font-weight: 700; }
.dz-ck-card__p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dz-fg-muted); }
.dz-ck-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border: 1.5px solid var(--dz-accent);
  border-radius: var(--dz-r-ctl);
  color: var(--dz-accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.dz-ck-ghost:hover { background: var(--dz-accent); color: var(--dz-on-accent); }
.dz-ck-ghost svg { width: 18px; height: 18px; }

/* Экспресс-оплата — блок появляется только со включённым флагом. */
.dz-ck-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--dz-fg-muted);
}
.dz-ck-or::before,
.dz-ck-or::after { content: ""; flex: 1; height: 1px; background: var(--dz-line); }

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.dz-ck-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 16px 0 20px;
  font-size: 12px;
  color: var(--dz-fg-muted);
}
.dz-ck-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.dz-ck-foot a { color: inherit; text-decoration: none; }
.dz-ck-foot a:hover { color: var(--dz-fg); }

/* ══ Десктоп (от 1024) — числа борда 1440 ═══════════════════════════════ */
@media (min-width: 1024px) {
  .dz-ck-head__in { height: 64px; padding: 0 var(--dz-ck-pad); }
  .dz-ck-logo { height: 44px; }
  .dz-ck-secure { gap: 8px; font-size: 14px; }
  .dz-ck-secure svg { width: 20px; height: 20px; }

  .dz-ck-wrap { padding: 32px var(--dz-ck-pad) 0; }
  .dz-ck-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
  .dz-ck-form { gap: 28px; }
  .dz-ck-side { position: sticky; top: 24px; }

  .dz-ck-sec { gap: 12px; }
  .dz-ck-sec__head { min-height: 26px; }
  .dz-ck-h2 { font-size: 20px; }
  .dz-ck-aside { font-size: 14px; }

  .dz-ck-field__box { height: 52px; }
  .dz-ck-field__ctl { padding: 20px 16px 4px; }
  .dz-ck-field__lab { left: 16px; right: 16px; }
  .dz-ck .dz-ck-field__box .dz-ck-field__ctl:focus ~ .dz-ck-field__lab,
  .dz-ck .dz-ck-field__box .dz-ck-field__ctl:not(:placeholder-shown) ~ .dz-ck-field__lab,
  .dz-ck .dz-ck-field.is-filled .dz-ck-field__box .dz-ck-field__lab { top: 9px; }
  .dz-ck-field__adorn { right: 16px; }
  .dz-ck-hint svg { width: 15px; height: 15px; }
  .dz-ck-row2, .dz-ck-row3 { gap: 12px; }
  .dz-ck-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dz-ck-row3 > :first-child { grid-column: auto; }

  .dz-ck-choice { min-height: 60px; padding: 8px 18px; gap: 14px; }
  .dz-ck-choice.is-selected { padding: 7.5px 17.5px; }
  .dz-ck-choice__t, .dz-ck-choice__p { font-size: 16px; }

  .dz-ck-pay__head { min-height: 64px; padding: 0 20px; gap: 14px; }
  .dz-ck-pay__t { font-size: 16px; }
  .dz-ck-pay__chips { display: inline-flex; gap: 6px; }
  .dz-ck-pay__body { padding: 22px; gap: 14px; }
  .dz-ck-chips { gap: 6px; }
  .dz-ck-chip { padding: 2px 7px; font-size: 11px; background: var(--dz-card); }
  .dz-ck-check { gap: 10px; font-size: 14px; }
  .dz-ck-check__box { width: 20px; height: 20px; }
  .dz-ck-check__box svg { width: 14px; height: 14px; }
  .dz-ck-billing { padding: 16px; gap: 12px; }

  .dz-ck-bump {
    grid-template-columns: 24px 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "chk img t tag"
      "chk img p tag";
    column-gap: 16px;
    row-gap: 5px;
    padding: 18px 20px;
  }
  .dz-ck-bump__t { font-size: 16px; }
  .dz-ck-bump__tag { align-self: center; font-size: 13px; padding: 6px 12px; }

  .dz-ck-after { gap: 16px; }
  .dz-ck-trust svg { width: 16px; height: 16px; }

  .dz-ck-item { gap: 14px; }
  .dz-ck-item__t { font-size: 15px; }
  .dz-ck-ship { padding: 14px 16px; }
  .dz-ck-ship__of { font-size: 13px; }
  .dz-ck-tot__val { font-size: 24px; }

  .dz-ck-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
    padding: 16px 0 32px;
    border-top: 1px solid var(--dz-line);
    font-size: 13px;
  }
  .dz-ck-foot__links { justify-content: flex-start; gap: 24px; }
}
@media (min-width: 1200px) {
  .dz-ck-grid { grid-template-columns: minmax(0, 1fr) 456px; gap: 48px; }
}

/* ══ Чекаутный бамп v2: кикер, мета-строка с отсчётом (2026-09-08) ═══════
 * Владелец: «товар недорогой с хорошей скидкой который просто глупо не
 * добавить», окно 90 с. Сетка: мобильный — четыре ряда, десктоп — три ряда
 * в третьей колонке, чекбокс/картинка/чип тянутся на всю высоту. */
.dz-ck-bump {
  grid-template-areas:
    "chk img t"
    "p p p"
    "m m m"
    "tag tag tag";
}
.dz-ck-bump__head {
  grid-area: t;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dz-ck-bump__k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dz-pink);
}
.dz-ck-bump__m {
  grid-area: m;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dz-fg-muted);
}
.dz-ck-bump__m b {
  color: var(--dz-accent);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dz-ck-bump.is-added { background: rgba(242, 255, 0, 0.06); }
@media (min-width: 1024px) {
  .dz-ck-bump {
    grid-template-areas:
      "chk img t tag"
      "chk img p tag"
      "chk img m tag";
  }
}

/* ══ Подарок в сводке — как в дровере (cart-drawer-dozo.css .is-free-unit) ═
 * Зелёная подложка с полосой слева, зелёная рамка картинки + лента, бейдж
 * «FREE · BUY 6 GET 2» с бликом, «You save $X», «$0.00» зелёным Chillax,
 * въезд + двойное свечение при появлении. */
.dz-ck-item.is-gift {
  position: relative;
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: var(--dz-r-ctl);
  background: linear-gradient(
    90deg,
    rgba(34, 164, 71, 0.16),
    rgba(34, 164, 71, 0.06) 62%,
    rgba(214, 35, 237, 0.06)
  );
  box-shadow: inset 3px 0 0 var(--dz-success);
  animation:
    dz-ck-gift-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    dz-ck-gift-glow 1.1s ease-in-out 0.45s 2;
}
.dz-ck-item.is-gift .dz-ck-item__img {
  outline: 2px solid var(--dz-success);
  outline-offset: -2px;
}
.dz-ck-item.is-gift .dz-ck-item__qty {
  background: var(--dz-success);
  color: #fff;
}
.dz-ck-item__ribbon {
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--dz-success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dz-ck-item__ribbon svg { width: 12px; height: 12px; }
.dz-ck-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.dz-ck-item__badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--dz-success);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dz-ck-item__badge svg { width: 12px; height: 12px; flex: none; }
/* Медленный блик по бейджу — «это подарок» видно и после въезда. */
.dz-ck-item__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: dz-ck-badge-shine 3.2s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.dz-ck-item__saved {
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-success);
  white-space: nowrap;
}
.dz-ck-item.is-gift .dz-ck-item__p {
  color: var(--dz-success);
  font-size: 16px;
}
@keyframes dz-ck-gift-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes dz-ck-gift-glow {
  0%, 100% { box-shadow: inset 3px 0 0 var(--dz-success), 0 0 0 0 rgba(34, 164, 71, 0); }
  50% { box-shadow: inset 3px 0 0 var(--dz-success), 0 0 0 5px rgba(34, 164, 71, 0.24); }
}
@keyframes dz-ck-badge-shine {
  0% { transform: translateX(-120%); }
  35%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-ck-item.is-gift, .dz-ck-item__badge::after { animation: none; }
}

/* ══ Анимация бампа (владелец 2026-09-09: «чтоб глаз цеплялся») ═══════════
 * Появление: въезд + два «вдоха» жёлтым по рамке; чип «Only on this page» —
 * блик раз в ~4 с; последние 15 с окна — отсчёт пульсирует, рамка мигает. */
.dz-ck-bump {
  animation:
    dz-ck-bump-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    dz-ck-bump-glow 1.2s ease-in-out 0.45s 2;
}
.dz-ck-bump__tag {
  position: relative;
  overflow: hidden;
}
.dz-ck-bump__tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: dz-ck-badge-shine 4s ease-in-out 2s infinite;
  pointer-events: none;
}
.dz-ck-bump.is-urgent {
  animation: dz-ck-bump-urgent 1s ease-in-out infinite;
}
.dz-ck-bump.is-urgent .dz-ck-bump__m b {
  display: inline-block;
  font-size: 15px;
  animation: dz-ck-timer-pulse 1s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes dz-ck-bump-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes dz-ck-bump-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 255, 0, 0); }
  50% { box-shadow: 0 0 0 6px rgba(242, 255, 0, 0.28); }
}
@keyframes dz-ck-bump-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 255, 0, 0); border-color: var(--dz-accent); }
  50% { box-shadow: 0 0 0 5px rgba(242, 255, 0, 0.22); border-color: #fff; }
}
@keyframes dz-ck-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-ck-bump, .dz-ck-bump.is-urgent, .dz-ck-bump__tag::after, .dz-ck-bump.is-urgent .dz-ck-bump__m b { animation: none; }
}

/* ── NMI hosted card fields (Collect.js iframes) ─────────────────────────── */
/* The gateway mounts one iframe per container; it must fill the same box the
   Accept.js <input> did so the two providers look identical. */
.dz-ck-field__ctl--hosted { display: block; padding: 0; overflow: hidden; }
.dz-ck-field__ctl--hosted iframe { display: block; width: 100%; height: 100%; border: 0; }
.dz-ck-field--adorn .dz-ck-field__ctl--hosted { padding-right: 0; }

/* --- /theme/categories.css --- */
.categories_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    justify-items: center;
    gap: 50px
}
.categories:link,
.categories:visited {
    max-width: 300px;
    position: relative;
    text-decoration: none;
    line-height: 1.2;

}
.categories:hover .category-title{
  font-weight: 700;
}
.categories:link>div,
.categories:visited>div {
    line-height: 0;
    border: 2px solid #F2FF00;
    border-radius: 29px;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3);
     transition: .3s ease;
}

.overlay {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    background-color: #F2FF00CC;
    opacity: 0;
    border: 0.5px solid #000000;
}

.categories:active,
.categories:hover {
    font-weight: 700;
}

.categories:active>div,
.categories:hover>div {
    background-color: #F2FF00;
}


.categories_section {
    padding: 20px 80px;
    margin-top: 36px;
    margin-bottom: 36px;
    background: linear-gradient(to right, #D623ED, #8400D6);
    border-radius: 63px;
    box-shadow: 0 18px 12px #0000004d;
}

.categories_section_no-padding {
    border-top: none;
    border-bottom: none;

}

.categories img {
    width: 100%;
    padding: 10px;
}

.categories_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.categories_title {
    font-size: 38px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

.categories_button:link,
.categories_button:visited {
    color: #2A005E;
    background-color: #000;
    padding: 8px 60px;
    border-radius: 12px;
    line-height: 1.5;
    font-family: Alfa Slab One, serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 24px;
    text-decoration: none;
    transition: all .3s;
    background: linear-gradient(to bottom, #fbffb4, #f2ff00, #f2ff00, #afb900);
    box-shadow: 0 9px 4px #0003;
}

.category-title {
    font-size: 24px;
    color: #fff;
    font-family: 'Gowun Batang', serif;
    text-align: center;
    margin: 5px 0 0;
    font-weight: 500;
}


.categories_button:active,
.categories_button:hover {
    background: linear-gradient(to bottom, #fff7a6, #ff0, #d5cc00, #999000);
    box-shadow: 0 12px 6px #0000004d;
}

.categories_button-mobile {
    display: none;
}

@media screen and (max-width:1150px) {

    .categories_button:link,
    .categories_button:visited {
        padding: 8px 60px;
        font-size: 20px;
    }

    .categories_title {
        font-size: 30px;
    }
}

@media screen and (max-width:950px) {

    .categories_button:link,
    .categories_button:visited {
        padding: 8px 40px;
    }

    .categories_title {
        font-size: 26px;
    }

    .category-collection-title {
        font-size: 20px;
    }
}

@media screen and (max-width:860px) {
  .categories_section {
    background: transparent;
    box-shadow: none;
}
    .categories_button-mobile {
        display: block;
        text-align: center;
        margin-top: 20px;
    }

    .categories_section {
        padding-left: 40px;
        padding-right: 40px;
        border: none;
    }

    .categories_grid {
        gap: 40px;
    }

    .category-title {

        font-size: 12px;
    }

    .categories_title {
        margin: 0 auto;
        font-size: 20px;
    }

    .categories_top a {
        display: none;
    }
}

@media screen and (max-width:860px) {
    .categories_grid {
        gap: 20px;
    }
}
/* --- /theme/collection-row.css --- */
.progress-bar {
    width: 50%;
    height: 12px !important;
    border: 1px solid #fff !important;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.progress-bar-fill {
    display: block !important;
    height: 100%;
    width: 0;
    background-color: #fff !important;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
    border-radius: 20px;
}
.collections-row_item:link,
.collections-row_item:visited {
    max-width: 120px;
    text-decoration: none;
    flex-shrink: 0;
}
.collections-row{
    margin: 20px auto;
}
.collections-row_slider.slider {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 16px;
}
.collections-row_item.slider__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align: center;
}
.slider-buttons {
  margin-top: 10px;
}
.progress-bar-fill {
  height: 2px;
  width: 0;
  transition: width 0.3s ease;
}
.collections-row_item:hover p,
.collections-row_item:active p,
.collections-row_item-active p {
    font-weight: 700;
}

.collections-row_item:hover>div,
.collections-row_item:active>div,
.collections-row_item-active>div {
    background-color: #F2FF00;
}

.collections-row_item:link>div,
.collections-row_item:visited>div {
    line-height: 0;
    border: 2px solid #F2FF00;
    max-width: 120px;
    border-radius: 26px;
    transition: 0.3s ease;
}

.collection_row_section_bottom {
    display: none;
    align-items: center;
    justify-content: space-between;
}

.collection_row_buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end;
}

.collection_row_button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius: 13px;
    width: 45px;
    height: 45px;
    transition: all 0.3s;
    border: 0.5px solid #000;
    cursor: pointer;
}

.collection_row_button:hover,
.collection_row_button:active {
    background-color: #F2FF00;
}

.collection_row_button:hover,
.collection_row_button:active {
    transition: all 0.3s;
}

.collection_row_button:hover path,
.collection_row_button:active path {
    fill: #000;
}

.collections-row_item:link>div img,
.collections-row_item:visited>div img {
    width: 100%;
}

.collections-row_item p {
    font-size: 14px;
    margin: 8px 0 0;
    text-align: center;
    line-height: 1.3;
    color: #fff;
}

.collections-row_slider {
    justify-content: start;
    justify-items: center;
    transition: all 0.3s;
    gap: 20px;
    display: flex;
}


.collections-row_slider-container {
    margin-bottom: 30px;
}

.collections-row_slider-container {
    overflow: hidden;
}

@media screen and (max-width:860px) {

    .collection_row_section_bottom .progress-bar,
    .collection_row_section_bottom .collection_row_buttons {
        display: none;
    }

    .collections-row_slider-container {
        overflow: scroll;
        margin-bottom: 0;
    }

    .collections-row_slider-container {
        scrollbar-width: none;

        -ms-overflow-style: none;
        overflow: auto;
    }

    .collections-row_slider-container::-webkit-scrollbar {
        display: none;
    }
.collections-row_item:link, .collections-row_item:visited {
    max-width: 90px;
}
}
@media screen and (max-width:750px) {
.collections-row{
  margin:20px 36px 0 36px;
  padding: 0 !important;
}

}
/* --- /theme/component-accordion.css --- */
.accordion svg path{
  fill:#fff;
}
.accordion summary {
  display: flex;
  position: relative;
  line-height: 1;
  padding: 1.5rem 0;
}

.accordion .summary__title {
  display: flex;
  flex: 1;
}

.accordion .summary__title+.icon-caret {
  height: calc(var(--font-heading-scale) * 0.6rem);
}

.accordion+.accordion {
  margin-top: 0;
  border-top: none;
}

.accordion {
    margin-top: 2.5rem;
    margin-bottom: 0;
    border: 2px solid #fff;
    background-color: #8400D6;
}

.accordion__title {
  display: inline-block;
  max-width: calc(100% - 6rem);
  min-height: 1.6rem;
  margin: 0;
  word-break: break-word;
  color:#fff;
}

.accordion .svg-wrapper {
  align-self: center;
  fill: rgb(var(--color-foreground));
  height: calc(var(--font-heading-scale) * 2rem);
  margin-right: calc(var(--font-heading-scale) * 1rem);
  width: calc(var(--font-heading-scale) * 2rem);
}

.accordion details[open]>summary .icon-caret {
  transform: rotate(180deg);
}

.accordion__content {
    margin-bottom: 1.5rem;
    word-break: break-word;
    padding: 0 .6rem;
    color: #fff;
    font-weight: 400;
    font-size: 17px;
    line-height: 120%;
}

.accordion__content img {
  max-width: 100%;
}

@media (max-width:768px){
  .accordion {
        margin-top: 2.5rem;
        margin-bottom: 0;
        border: none;
        background-color: #8400d580;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
}

.accordion__content{
  margin-bottom: 0;
}
details[open] .accordion__title {
    font-weight: 600;
}
.accordion__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}
.accordion__content {
    font-size: 16px;
    line-height: 120%;
    font-weight: 500;
}
.product__accordion .accordion__content {
    padding: 0 1rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 18px !important;
}
details[open] svg path {
  fill-opacity:1;
}
}

/* --- /theme/component-card.css --- */
.card-wrapper {
  color: inherit;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.card {
  text-decoration: none;
  text-align: var(--text-alignment);
}

.card:not(.ratio) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.card--horizontal {
  --text-alignment: left;
  --image-padding: 0rem;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

.card--horizontal.ratio:before {
  padding-bottom: 0;
}

.card--card.card--horizontal {
  padding: 1.2rem;
}

.card--card.card--horizontal.card--text {
  column-gap: 0;
}

.card--card {
  height: 100%;
}

.card--card,
.card--standard .card__inner {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
  border-radius: 27px;
  border: 1px solid #4D008C;
}

.card--card:after,
.card--standard .card__inner:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: calc(var(--border-width) * 2 + 100%);
  height: calc(var(--border-width) * 2 + 100%);
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.card--card.gradient,
.card__inner.gradient {
  transform: perspective(0);
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.card__inner.color-scheme-1 {
  background: transparent;
}

.card .card__inner .card__media {
  overflow: hidden;
  /* Fix for Safari border bug on hover */
  z-index: 0;
  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
  border-radius: 27px;
}

.card--card .card__inner .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card--standard.card--text {
  background-color: transparent;
}

.card-information {
  text-align: var(--text-alignment);
}

.card__media,
.card .media {
  bottom: 0;
  position: absolute;
  top: 0;
}

.card .media {
  width: 100%;
}

.card__media {
  margin: var(--image-padding);
  width: calc(100% - 2 * var(--image-padding));
}

.card--standard .card__media {
  margin: var(--image-padding);
}

.card__inner {
  width: 100%;
}

.card--media .card__inner .card__content {
  position: relative;
  padding: calc(var(--image-padding) + 1rem);
}

.card__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
  padding: 1rem;
  width: 100%;
  flex-grow: 1;
}

.card__content--auto-margins {
  grid-template-rows: minmax(0, auto) max-content minmax(0, auto);
}

.card__information {
  grid-row-start: 2;
  padding: 1.3rem 1rem;
}

.card:not(.ratio) > .card__content {
  grid-template-rows: max-content minmax(0, 1fr) max-content auto;
}

.card-information .card__information-volume-pricing-note {
  margin-top: 0.6rem;
  line-height: calc(0.5 + 0.4 / var(--font-body-scale));
  color: rgba(var(--color-foreground), 0.75);
}

.card__information-volume-pricing-note--button,
.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-align: var(--text-alignment);
  min-width: auto;
}

.card__information-volume-pricing-note--button:hover {
  text-decoration: underline;
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
  transform: initial;
  top: auto;
  bottom: 4rem;
  max-width: 20rem;
  width: calc(95% + 2rem);
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info span:first-of-type {
  padding-right: 0.3rem;
}

.card__information-volume-pricing-note--button-right + .global-settings-popup.quantity-popover__info {
  right: 0;
  left: auto;
}

.card__information-volume-pricing-note--button-center + .global-settings-popup.quantity-popover__info {
  left: 50%;
  transform: translate(-50%);
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info .quantity__rules {
  text-align: left;
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .card__content quick-add-bulk .quantity {
    width: auto;
  }

  .grid--6-col-desktop .card__content quick-add-bulk .quantity__button {
    width: calc(3rem / var(--font-body-scale));
  }

  .grid--6-col-desktop .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
    width: calc(100% + var(--border-width) + 3.5rem);
  }

  .grid--6-col-desktop
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 1rem);
  }
}

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity__button {
    width: calc(3.5rem / var(--font-body-scale));
  }

  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info,
  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
  }

  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: 100%;
  }

  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 4rem);
  }

  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity {
    width: auto;
  }
}

.card-information quantity-popover volume-pricing {
  margin-top: 0;
}

@media screen and (max-width: 989px) {
  .card-information quantity-popover .quantity__rules ~ volume-pricing {
    margin-top: 0;
  }

  .card-information quantity-popover volume-pricing {
    margin-top: 4.2rem;
  }
}

@media screen and (min-width: 750px) {
  .card__information {
    padding-bottom: 1.7rem;
    padding-top: 1.7rem;
  }
}

.card__badge {
  align-self: flex-end;
  grid-row-start: 3;
  justify-self: flex-start;
}

.card__badge.top {
  align-self: flex-start;
  grid-row-start: 1;
}

.card__badge.right {
  justify-self: flex-end;
}

.card:not(.card--horizontal) > .card__content > .card__badge {
  margin: 1.3rem;
}

.card__media .media img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.card__inner:not(.ratio) > .card__content {
  height: 100%;
}

.card__heading {
  margin-top: 0;
  margin-bottom: 0;
}

.card__heading:last-child {
  margin-bottom: 0;
}

.card--horizontal .card__heading,
.card--horizontal .price__container .price-item,
.card--horizontal__quick-add {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

.card--horizontal
  .card-information
  > *:not(.visually-hidden:first-child)
  + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0;
}

.card--horizontal__quick-add:before {
  box-shadow: none;
}

@media only screen and (min-width: 750px) {
  .card--horizontal .card__heading,
  .card--horizontal .price__container .price-item,
  .card--horizontal__quick-add {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

.card--card.card--media > .card__content {
  margin-top: calc(0rem - var(--image-padding));
}

.card--standard.card--text a::after,
.card--card .card__heading a::after {
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  right: calc(var(--border-width) * -1);
  top: calc(var(--border-width) * -1);
}

.card__heading a::after {
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.card__heading a:after {
  outline-offset: 0.3rem;
}

.card__heading a:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}

.card__heading a:focus {
  box-shadow: none;
  outline: 0;
}

@media screen and (min-width: 990px) {
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--duration-long) ease;
  }

  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.03);
  }

  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
  }

  .underline-links-hover:hover a {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
}

.card--standard.card--media .card__inner .card__information,
.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder),
.card--standard:not(.card--horizontal) > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
  display: none;
}

.card--standard:not(.card--horizontal) .placeholder-svg {
  width: 100%;
}

.card--standard > .card__content {
  padding: 0;
}

.card--standard > .card__content .card__information {
  padding-left: 0;
  padding-right: 0;
}

.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media > .card__content .card__badge {
  display: none;
}

.card--horizontal .card__badge,
.card--horizontal.card--text .card__inner {
  display: none;
}

.card--extend-height {
  height: 100%;
}

.card--extend-height.card--standard.card--text,
.card--extend-height.card--media {
  display: flex;
  flex-direction: column;
}

.card--extend-height.card--standard.card--text .card__inner,
.card--extend-height.card--media .card__inner {
  flex-grow: 1;
}

.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
  transition: transform var(--duration-short) ease;
  overflow: hidden;
}

.card-information > * + * {
  margin-top: 0.5rem;
}

.card-information {
  width: 100%;
}

.card-information > * {
  line-height: calc(1 + 0.4 / var(--font-body-scale));
  color: #fff;
}

.card-information > .price {
  color: #fff;
}

.card--horizontal .card-information > .price {
  color: rgba(var(--color-foreground), 0.75);
}

.card-information > .rating {
  margin-top: 0.4rem;
}

/* Specificity needed due to the changes below */
.card-information
  > *:not(.visually-hidden:first-child)
  + quantity-popover:not(.rating):not(.card__information-volume-pricing-note),
.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
  margin-top: 0;
}

.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0.7rem;
}

.card-information .caption {
  letter-spacing: 0.07rem;
}

.card-article-info {
  margin-top: 1rem;
}

/* Card Shapes */

.card--shape .card__content {
  padding-top: 0;
}

.card--shape.card--standard:not(.card--text) .card__inner {
  border: 0;
  /* Border is not currently compatible with image shapes for standard cards. */
  background-color: transparent;
  filter: drop-shadow(
    var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
      rgba(var(--color-shadow), var(--shadow-opacity))
  );
}

.card--shape.card--standard:not(.card--text) .card__inner:after {
  display: none;
}

.grid__item:nth-child(2n) .shape--blob {
  clip-path: polygon(var(--shape--blob-2));
}

.grid__item:nth-child(3n) .shape--blob {
  clip-path: polygon(var(--shape--blob-3));
}

.grid__item:nth-child(4n) .shape--blob {
  clip-path: polygon(var(--shape--blob-4));
}

.grid__item:nth-child(5n) .shape--blob {
  clip-path: polygon(var(--shape--blob-5));
}

.grid__item:nth-child(7n) .shape--blob {
  clip-path: polygon(var(--shape--blob-6));
}

.grid__item:nth-child(8n) .shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

/* Card Shape Hover Rules */

@media (prefers-reduced-motion: no-preference) {
  .product-card-wrapper .shape--round {
    transition: clip-path var(--duration-long) ease;
  }

  .product-card-wrapper:hover .shape--round {
    clip-path: ellipse(47% 47% at 50% 50%);
  }

  .product-card-wrapper .shape--blob {
    transition: clip-path var(--duration-long) ease-in-out;
  }

  .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }

  .grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-6));
  }

  .grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-1));
  }

  .grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-2));
  }

  .grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-3));
  }

  .grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-4));
  }

  .grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }
}

/* --- /theme/component-cart-items.css --- */
cart-items .title-wrapper-with-link {
  margin-top: 0;
}

.cart-items td,
.cart-items th {
  padding: 0;
  border: none;
}

.cart-items th {
  text-align: left;
  padding-bottom: 1.8rem;
  opacity: 0.85;
  font-weight: normal;
}

.cart-item__quantity-wrapper {
  display: flex;
}

.cart-item__totals {
  position: relative;
}

.cart-items *.right {
  text-align: right;
}

.cart-item__image-container {
  display: inline-flex;
  align-items: flex-start;
}

.cart-item__image-container:after {
  content: none;
}

.cart-item__image {
  height: auto;
  max-width: calc(10rem / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .cart-item__image {
    max-width: 100%;
  }
}

.cart-item__details {
  font-size: 1.6rem;
  line-height: calc(1 + 0.4 / var(--font-body-scale));
}

.cart-item__details > * {
  margin: 0;
  max-width: 30rem;
}

.cart-item__details > * + * {
  margin-top: 0.6rem;
}

.cart-item__media {
  position: relative;
}

.cart-item__link {
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.cart-item__name {
  text-decoration: none;
  display: block;
}

.cart-item__name:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.2rem;
}

.cart-item__price-wrapper > * {
  display: block;
  margin: 0;
  padding: 0;
}

.cart-item__discounted-prices dd {
  margin: 0;
}

.cart-item__discounted-prices .cart-item__old-price {
  font-size: 1.4rem;
}

.cart-item__old-price {
  opacity: 0.7;
}

.cart-item__final-price {
  font-weight: 400;
}

.product-option {
  font-size: 1.4rem;
  word-break: break-word;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
}

.cart-item cart-remove-button {
  display: flex;
  margin-left: 1rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .cart-item cart-remove-button {
    width: 4.5rem;
    height: 4.5rem;
  }
}

cart-remove-button .button {
  min-width: calc(4.5rem / var(--font-body-scale));
  min-height: 4.5rem;
  padding: 0;
  margin: 0 0.1rem 0.1rem 0;
}

cart-remove-button .button:before,
cart-remove-button .button:after {
  content: none;
}

cart-remove-button .button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

@media screen and (min-width: 750px) {
  cart-remove-button .button {
    min-width: 3.5rem;
    min-height: 3.5rem;
  }
}

cart-remove-button .icon-remove {
  height: 1.5rem;
  width: 1.5rem;
}

.cart-item .loading__spinner {
  top: 0;
  left: auto;
  right: auto;
  bottom: 0;
  padding: 0;
}

@media screen and (min-width: 750px) {
  .cart-item .loading__spinner {
    right: 0;
    padding-top: 4.5rem;
    bottom: auto;
  }
}

.cart-item .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

.cart-item__error {
  display: flex;
  align-items: flex-start;
  margin-top: 0.2rem;
  width: min-content;
  min-width: 100%;
}

.cart-item__error-text {
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: 0.04rem;
  order: 1;
}

.cart-item__error-text + .svg-wrapper {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.7rem;
  margin-top: 0.25rem;
}

.cart-item__error-text:empty + .svg-wrapper {
  display: none;
}

.product-option + .product-option {
  margin-top: 0.4rem;
}

.product-option * {
  display: inline;
  margin: 0;
}

.cart-items thead th {
  text-transform: uppercase;
}

@media screen and (max-width: 749px) {
  .cart-items,
  .cart-items thead,
  .cart-items tbody {
    display: block;
    width: 100%;
  }

  .cart-items thead tr {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
    margin-bottom: 4rem;
  }

  .cart-item {
    display: grid;
    grid-template: repeat(2, auto) / repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
  }

  .cart-item:last-child {
    margin-bottom: 0;
  }

  .cart-item__media {
    grid-row: 1 / 3;
  }

  .cart-item__details {
    grid-column: 2 / 4;
  }

  .cart-item__quantity {
    grid-column: 2 / 5;
  }

  .cart-item__quantity-wrapper {
    flex-wrap: wrap;
  }

  .cart-item__totals {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
}

@media screen and (min-width: 750px) {
  .cart-items {
    border-spacing: 0;
    border-collapse: separate;
    box-shadow: none;
    width: 100%;
    display: table;
  }

  .cart-items th {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }

  .cart-items thead th:first-child {
    width: 50%;
  }

  .cart-items th + th {
    padding-left: 4rem;
  }

  .cart-items td {
    vertical-align: top;
    padding-top: 4rem;
  }

  .cart-item {
    display: table-row;
  }

  .cart-item > td + td {
    padding-left: 4rem;
  }

  .cart-item__details {
    width: 35rem;
  }

  .cart-item__media {
    width: 10rem;
  }

  .cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
    margin-top: 1rem;
  }

  .cart-item__error {
    margin-left: 0.3rem;
  }
}

@media screen and (min-width: 990px) {
  .cart-item .cart-item__quantity,
  .cart-items .cart-items__heading--wide {
    padding-left: 6rem;
  }

  .cart-item__details {
    width: 50rem;
  }

  .cart-items thead th:first-child {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  .cart-items .cart-items__heading--quantity,
  .cart-item .cart-item__quantity,
  .cart-item__quantity--info quantity-popover > * {
    padding-left: 5rem;
  }

  .cart-item .cart-item__quantity--info,
  .cart-item__quantity--info .cart-item__quantity-wrapper,
  .cart-item__quantity--info .cart-items__info {
    padding-left: 0;
  }
}

@media screen and (max-width: 989px) {
  .cart-items .quantity-popover__info-button {
    padding-left: 0;
  }
}

/* --- /theme/component-cart-notification.css --- */
.cart-notification-wrapper {
  position: relative;
}

.cart-notification-wrapper .cart-notification {
  display: block;
}

.cart-notification {
  border-bottom-right-radius: var(--popup-corner-radius);
  border-bottom-left-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: 0 0 var(--popup-border-width);
  padding: 2.5rem 3.5rem;
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  visibility: hidden;
  width: 100%;
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.cart-notification.focused {
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
      rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

.cart-notification:focus-visible {
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
      rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

@media screen and (min-width: 750px) {
  .header-wrapper:not(.header-wrapper--border-bottom) + cart-notification .cart-notification {
    border-top-width: var(--popup-border-width);
  }

  .cart-notification {
    border-width: 0 var(--popup-border-width) var(--popup-border-width);
    max-width: 36.8rem;
    right: 2.2rem;
  }
}

@media screen and (min-width: 990px) {
  .cart-notification-wrapper:is(.page-width) > .cart-notification {
    right: 4rem;
  }
}

.cart-notification.animate {
  transition: transform var(--duration-short) ease, visibility 0s var(--duration-short) ease;
}

.cart-notification.active {
  transform: translateY(0);
  transition: transform var(--duration-default) ease, visibility 0s;
  visibility: visible;
}

.cart-notification__header {
  align-items: flex-start;
  display: flex;
}

.cart-notification__heading {
  align-items: center;
  display: flex;
  flex-grow: 1;
  margin-bottom: 0;
  margin-top: 0;
}

.cart-notification__heading .icon-checkmark {
  color: rgb(var(--color-foreground));
  margin-right: 1rem;
  width: 1.3rem;
}

.cart-notification__close {
  margin-top: -2rem;
  margin-right: -3rem;
}

.cart-notification__links {
  text-align: center;
}

.cart-notification__links > * {
  margin-top: 1rem;
}

.cart-notification-product {
  align-items: flex-start;
  display: flex;
  padding-bottom: 3rem;
  padding-top: 2rem;
}

.cart-notification-product dl {
  margin-bottom: 0;
  margin-top: 0;
}

.cart-notification-product__image {
  display: inline-flex;
  margin-right: 1.5rem;
  margin-top: 0.5rem;
}

.cart-notification-product__image:after {
  content: none;
}

.cart-notification-product__name {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

/* --- /theme/component-cart.css --- */
.cart {
  position: relative;
  display: block;
}

.cart__empty-text,
.is-empty .cart__contents,
cart-items.is-empty .title-wrapper-with-link,
.is-empty .cart__footer {
  display: none;
}

.is-empty .cart__empty-text,
.is-empty .cart__warnings {
  display: block;
}

.cart__warnings {
  display: none;
  text-align: center;
  padding: 3rem 0 1rem;
}

.cart__empty-text {
  margin: 4.5rem 0 2rem;
}

.cart__contents > * + * {
  margin-top: 2.5rem;
}

.cart__login-title {
  margin: 5.5rem 0 0.5rem;
}

.cart__login-paragraph {
  margin-top: 0.8rem;
}

.cart__login-paragraph a {
  font-size: inherit;
}

@media screen and (min-width: 990px) {
  .cart__warnings {
    padding: 7rem 0 1rem;
  }

  .cart__empty-text {
    margin: 0 0 3rem;
  }
}

cart-items {
  display: block;
}

.cart__items {
  position: relative;
  padding-bottom: 3rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.cart__items--disabled {
  pointer-events: none;
}

.cart__footer-wrapper:last-child .cart__footer {
  padding-bottom: 5rem;
}

.cart__footer > div:only-child {
  margin-left: auto;
}

.cart__footer > * + * {
  margin-top: 6.5rem;
}

.cart__footer .discounts {
  margin-bottom: 1rem;
}

.cart__note {
  height: fit-content;
  top: 2.5rem;
}

.cart__note label {
  display: flex;
  align-items: flex-end;
  position: absolute;
  line-height: 1;
  height: 1.8rem;
  top: -3rem;
  color: rgba(var(--color-foreground), 0.75);
}

.cart__note .field__input {
  height: 100%;
  position: relative;
  border-radius: var(--inputs-radius);
  padding: 1rem 2rem;
}

.cart__note .text-area {
  resize: vertical;
}

.cart__note:after,
.cart__note:hover.cart__note:after,
.cart__note:before,
.cart__note:hover.cart__note:before,
.cart__note .field__input:focus,
.cart__note .field__input {
  border-bottom-right-radius: 0;
}

@media screen and (min-width: 750px) {
  .cart__items {
    grid-column-start: 1;
    grid-column-end: 3;
    padding-bottom: 4rem;
  }

  .cart__contents > * + * {
    margin-top: 0;
  }

  .cart__items + .cart__footer {
    grid-column: 2;
  }

  .cart__footer {
    display: flex;
    justify-content: space-between;
    border: 0;
  }

  .cart__footer-wrapper:last-child {
    padding-top: 0;
  }

  .cart__footer > * {
    width: 35rem;
  }

  .cart__footer > * + * {
    margin-left: 4rem;
    margin-top: 0;
  }
}

.cart__ctas button {
  width: 100%;
}

.cart__ctas > * + * {
  margin-top: 1rem;
}

.cart__update-button {
  margin-bottom: 1rem;
}

.cart__dynamic-checkout-buttons {
  max-width: 36rem;
  margin: 0 auto;
}

.cart__dynamic-checkout-buttons:has(.dynamic-checkout__content:empty) {
  margin: 0;
}

.cart__blocks > * + * {
  margin-top: 1rem;
}

.cart-note__label {
  display: inline-block;
  margin-bottom: 1rem;
  line-height: calc(1 + 1 / var(--font-body-scale));
}

.tax-note {
  margin: 2.2rem 0 1.6rem auto;
  text-align: center;
  display: block;
}

.cart__checkout-button {
  max-width: 36rem;
}

.cart__ctas {
  text-align: center;
}

@media screen and (min-width: 750px) {
  .cart-note {
    max-width: 35rem;
  }

  .cart__update-button {
    margin-bottom: 0;
    margin-right: 0.8rem;
  }

  .tax-note {
    margin-bottom: 2.2rem;
    text-align: right;
  }

  [data-shopify-buttoncontainer] {
    justify-content: flex-end;
  }

  .cart__ctas {
    display: flex;
    gap: 1rem;
  }
}

/* --- /theme/component-collection-hero.css --- */
.collection-banner {
  width: 100%;
  position: relative;
  line-height: 0;
}

.collection-title {
  position: absolute;
  top: 48px;
  display: block;
  padding: 4px 15px;
  background-color: #2A005E;
  color: #fff;
  border-radius: 50px;
  font-family: 'Gowun Batang', serif;
  font-weight: 700;
  font-size: 23px;
  left: 91px;
  line-height: 1.7;
}

.collection-bg,
.collection-bg_mob {
  width: 100%;
}

.collection-bg_mob {
  display: none;
}

.collection-promo {
  display: flex;
  padding: 10px 90px;
  gap: 20px;
  background: linear-gradient(to right, #D623ED, #8400D6);
  align-items: center;
  justify-content: space-between;
}

.collection-promo-icon-container img {
  width: 100%;
}

.collection-promo-button:link,
.collection-promo-button:visited {
padding: 3px 60px;
    background-color: #F2FF00;
    color: #2A005E;
    border-radius: 50px;
    font-family: Outfit, sans-serif;
    text-decoration: none;
    font-weight: 600;
    font-size: 24px;
    transition: all .3s;
    line-height: 1.7;
    text-wrap: nowrap;
    text-transform: uppercase;
}

.collection-promo-button:active,
.collection-promo-button:hover {
  background-color: #f2ff00eb;
  color: #000;

}

.collection-promo-content {
  display: flex;
  align-items: center;
}

.collection-promo-text {
  font-size: 36px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

@media screen and (max-width:1100px) {
  .collection-promo-text {
    font-size: 26px;
  }

  .collection-promo {
    padding: 0px 36px;
  }

  .collection-promo-button:link,
  .collection-promo-button:visited {
    font-size: 20px;
  }

  .collection-title {
    top: 30px;
    left: 50px;
    line-height: 1.7;
  }
}

@media screen and (max-width:820px) {

  .collection-bg {
    display: none;
  }

  .collection-bg_mob {
    display: block;
  }

  .collection-promo-icon-container {
    max-width: 70px;
  }

  .collection-promo-text {
    font-size: 16px;
  }

  .collection-promo-button:link,
  .collection-promo-button:visited {
    font-size: 12px;
  }

  .collection-title {
    top: 20px;
    left: 20px;
    font-size: 12px;
    line-height: 1.7;
  }
}

@media screen and (max-width:400px) {
  .collection-promo-icon-container {
    max-width: 70px;
  }

  .collection-promo {
    padding: 0px 20px;
  }

  .collection-promo-text {
    font-size: 14px;
  }

  .collection-promo-button:link,
  .collection-promo-button:visited {
    font-size: 12px;
  }

  .collection-title {
    top: 20px;
    left: 20px;
    font-size: 12px;
    line-height: 1.7;
  }
}
/* --- /theme/component-discounts.css --- */
.discounts {
  font-size: 1.2rem;
}

.discounts__discount {
  display: flex;
  align-items: center;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
}

.discounts__discount svg {
  color: rgba(var(--color-button), var(--alpha-button-background));
}

.discounts__discount--position {
  justify-content: center;
}

@media screen and (min-width: 750px) {
  .discounts__discount--position {
    justify-content: flex-end;
  }
}

.discounts__discount > .icon {
  color: rgb(var(--color-foreground));
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.7rem;
}

/* --- /theme/component-facets.css --- */
.facets-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  padding-top: 1rem;
}

.active-facets-mobile {
  margin-bottom: 0.5rem;
}

.mobile-facets__list {
  overflow-y: auto;
}

@media screen and (min-width: 750px) {
  .facets-container > * + * {
    margin-top: 0;
  }

  .facets__form .product-count {
    grid-column-start: 3;
    align-self: flex-start;
  }
}

@media screen and (max-width: 989px) {
  .facets-container {
    grid-template-columns: auto minmax(0, max-content);
    column-gap: 2rem;
  }
}

.facet-filters {
  align-items: flex-start;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  padding-left: 2.5rem;
}

@media screen and (min-width: 990px) {
  .facet-filters {
    padding-left: 3rem;
  }
}

.facet-filters__label {
  display: block;
  color: #fff;
  font-size: 1.4rem;
  margin: 0 2rem 0 0;
}

.facet-filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  cursor: pointer;
  height: 4.5rem;
  padding: 0 1.5rem;
  min-width: 25rem;
  margin-top: 2.4rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.55);
}

.facet-filters__summary::after {
  position: static;
}

.facet-filters__field {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.facet-filters__field .select {
  width: auto;
  color:#fff;
}

.facet-filters__field .select:after,
.facet-filters__field .select:before,
.mobile-facets__sort .select:after,
.mobile-facets__sort .select:before {
  content: none;
}

.facet-filters__field .select__select,
.mobile-facets__sort .select__select {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
  color: #fff;
}

.select .icon-caret {
  width: 10px;
}

.facet-filters button {
  margin-left: 2.5rem;
}

.facet-filters__sort {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: 1.4rem;
  height: auto;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  margin: 0;
  padding-left: 0;
  padding-right: 1.75rem;
}

.facet-filters__sort + .icon-caret {
  right: 0;
}

@media screen and (forced-colors: active) {
  .facet-filters__sort {
    border: none;
  }
}

.facet-filters__sort,
.facet-filters__sort:hover {
  box-shadow: none;
  filter: none;
  transition: none;
}

.mobile-facets__sort .select__select:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.mobile-facets__sort .select__select.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.facet-filters__sort:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.facet-filters__sort.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.facets {
  display: block;
  grid-column-start: span 2;
}

.facets__form {
  display: grid;
  gap: 0 3.5rem;
  grid-template-columns: 1fr max-content max-content;
  margin-bottom: 0.5rem;
  color:#fff;
}

.facets__wrapper {
  align-items: center;
  align-self: flex-start;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
}

.facets__heading {
  display: block;
  color: #fff;
  font-size: 1.4rem;
  margin: -1.5rem 2rem 0 0;
}

.facets__reset {
  margin-left: auto;
}

.facets__disclosure {
  margin-right: 3.5rem;
  color:#fff;
}

.facets__summary {
  color: #fff;
  font-size: 1.4rem;
  padding: 0 1.75rem 0 0;
  margin-bottom: 1.5rem;
}

.facets__summary .svg-wrapper {
  height: auto;
  width: auto;
}

.facets__disclosure fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

.facets__disclosure[open] .facets__summary,
.facets__summary:hover {
  color: rgb(var(--color-foreground));
}

.facets__disclosure[open] .facets__display,
.facets__disclosure-vertical[open] .facets__display-vertical {
  animation: animateMenuOpen var(--duration-default) ease;
}

.facets__summary span:first-of-type {
  transition: text-decoration var(--duration-short) ease;
}

.facets__summary:hover .facets__summary-label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.facets__and-helptext {
  color: rgba(var(--color-foreground), 0.5);
  font-size: calc(var(--font-heading-scale) * 1.2rem);
  line-height: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  .facets__and-helptext {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
    line-height: calc(var(--font-heading-scale) * 1.3rem);
  }
}

.facets__disclosure .facets__and-helptext,
.facets__disclosure-vertical .facets__and-helptext {
  display: none;
}

.facets__disclosure[open] .facets__and-helptext,
.facets__disclosure-vertical[open] .facets__and-helptext {
  display: block;
}

.disclosure-has-popup[open] > .facets__summary::before {
  z-index: 2;
}

.facets__summary > span {
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.facets__summary .icon-caret {
  right: 0;
}

.facets__display {
  border-width: var(--popup-border-width);
  border-style: solid;
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-radius: var(--popup-corner-radius);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  background-color: rgb(var(--color-background));
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1.2rem;
  width: 35rem;
  max-height: 55rem;
  overflow-y: auto;
}

.facets__header {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  position: sticky;
  top: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
}

.facets__header facet-remove {
  align-self: center;
}

.facets__list {
  padding: 0.5rem 2rem;
}

.facets-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
  padding: 2rem 2.4rem;
}

.facets-layout-list--swatch {
  --swatch-input--size: 2.4rem;
}

.facets-layout-grid.facets-layout-grid {
  gap: 1rem;
}

.facets-layout-grid.facets__list--vertical {
  padding: 1rem 0;
}

.facets__item {
  display: flex;
  align-items: center;
}

/* Hover/focus state */
.facets-layout-list .facets__label:hover .facet-checkbox__text-label,
.facets-layout-list input:focus ~ .facet-checkbox__text-label {
  text-decoration: underline;
}

.facets-layout-grid > * {
  align-items: flex-start;
}

.facets-layout-grid .facets__label {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
  font-size: 1.3rem;
}

/* Image filter specific styles */
.facets-layout-grid .facets__image-wrapper {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0.4rem;
}

.facets__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Default state */
.facets-layout-grid--image .facets__label {
  outline-style: solid;
  outline-color: transparent;
  transition-property: outline-color, outline-width, box-shadow;
  transition-duration: var(--duration-short);
  transition-timing-function: ease;
}

.facets-layout-grid--image .facet-checkbox__text {
  padding: 0.4rem;
}

/* Active state */
.facets-layout-grid--image .facets__label.active {
  outline-color: rgb(var(--color-foreground));
  outline-width: 0.1rem;
}

/* Hover state */
.facets-layout-grid--image .facets__label:hover {
  outline-color: rgba(var(--color-foreground), 0.4);
  outline-width: 0.2rem;
}

/* Focus visible */
.facets-layout-grid--image .facets__label:has(:focus-visible) {
  outline-color: rgba(var(--color-foreground), 0.5);
  outline-width: 0.2rem;
  box-shadow: 0px 0px 3px 1px rgba(var(--color-foreground), 0.25);
}

/* Focused state */
.facets-layout-grid--image .facets__label.active:has(:focus-visible) {
  outline-color: rgb(var(--color-foreground));
  outline-width: 0.1rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.7rem 0.1rem rgba(var(--color-foreground), 0.25);
}

/* Disabled state */
.facets-layout-grid--image .facets__label.disabled {
  /* Note: disabled gets its transparency set by a parent, so no need to set an alpha here. Also, we move the outline to the child when disabled */
  outline: none;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
  outline: 0.1rem solid rgb(var(--color-foreground));
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* 100% * square root of 2, this is not a magic number, it is math! */
  width: 141.4%;
  height: 0.1rem;
  background-color: rgb(var(--color-foreground));
  transform: rotate(-45deg);
  transform-origin: left;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  margin: 0;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line line {
  stroke: rgb(var(--color-foreground));
  stroke-width: 1;
}

/* End of image filter specific styles */

.list-menu__item label,
.list-menu__item input[type='checkbox'] {
  cursor: pointer;
}

.facet-checkbox {
  padding: 1rem 2rem 1rem 0;
  flex-grow: 1;
  position: relative;
  font-size: 1.4rem;
  display: flex;
  word-break: break-word;
}

/* Hover, active, and focus states */
.facets__label:hover,
.facets__label.active,
.facets__label:has(:focus-visible) {
  color: rgba(var(--color-foreground), 1);
}

/* Disabled state */
.facets-layout .facets__label.disabled {
  pointer-events: none;
}

.facets-layout:not(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled {
  opacity: 0.4;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
  opacity: 0.2;
}

:is(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled .facet-checkbox__text {
  opacity: 0.4;
}

/* End disabled state */

.facets-layout-list--text input[type='checkbox'] {
  position: absolute;
  opacity: 1;
  width: 1.6rem;
  height: 1.6rem;
  top: 0.7rem;
  left: -0.4rem;
  z-index: -1;
  appearance: none;
  -webkit-appearance: none;
}

.facets-layout-grid input[type='checkbox'],
.facets-layout-list--swatch input[type='checkbox'] {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.facets-layout-list--swatch .facets__label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.swatch-input-wrapper {
  display: flex;
}

.facet-checkbox > svg,
.facet-checkbox > .svg-wrapper {
  background-color: rgb(var(--color-background));
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.facet-checkbox .svg-wrapper {
  visibility: hidden;
  position: absolute;
  left: 0.3rem;
  z-index: 5;
  top: 1.4rem;
  width: 1.1rem;
  height: 0.7rem;
}

.facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
  visibility: visible;
}

@media screen and (forced-colors: active) {
  .facet-checkbox > svg {
    background-color: inherit;
    border: 0.1rem solid rgb(var(--color-background));
  }

  .facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
    border: none;
  }
}

.facets__price {
  display: flex;
  padding: 2rem;
}

.facets__price .field + .field-currency {
  margin-left: 2rem;
}

.facets__price .field {
  align-items: center;
}

.facets__price .field-currency {
  align-self: center;
  margin-right: 0.6rem;
}

.facets__price .field__label {
  left: 1.5rem;
}

button.facets__button {
  min-height: 0;
  margin: 0 0 0 0.5rem;
  box-shadow: none;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.active-facets {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -0.5rem;
}

.active-facets__button {
  display: block;
  margin-right: 1.5rem;
  margin-top: 1.5rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  text-decoration: none;
}

span.active-facets__button-inner {
  color: rgb(var(--color-foreground));
  box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
  border-radius: 2.6rem;
  font-size: 1rem;
  min-height: 0;
  min-width: 0;
  padding: 0.25rem 1.25rem;
  display: flex;
  align-items: center;
}

span.active-facets__button-inner:before,
span.active-facets__button-inner:after {
  display: none;
}

.active-facets__button-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

.active-facets__button-wrapper * {
  font-size: 1rem;
}

@media screen and (min-width: 990px) {
  .active-facets__button {
    margin-right: 1.5rem;
  }

  .active-facets__button-wrapper *,
  span.active-facets__button-inner {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 989px) {
  .active-facets {
    margin: 0 -1.2rem -1.2rem;
  }

  .active-facets__button,
  .active-facets__button-remove {
    margin: 0;
    padding: 1.2rem;
  }

  span.active-facets__button-inner {
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
  }

  .active-facets__button-wrapper {
    padding-top: 0;
    margin-left: 1.2rem;
  }
}

.active-facets__button:hover .active-facets__button-inner {
  box-shadow: 0 0 0 0.2rem rgb(var(--color-foreground));
}

.active-facets__button--light .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
}

.active-facets__button--light:hover .active-facets__button-inner {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.4);
}

a.active-facets__button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  a.active-facets__button:focus-visible {
    outline: transparent solid 1px;
  }
}
a.active-facets__button.focused {
  outline: none;
  box-shadow: none;
}

a.active-facets__button:focus-visible .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
    0 0 0 0.4rem rgb(var(--color-foreground));
  outline: none;
}

a.active-facets__button.focused .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
    0 0 0 0.4rem rgb(var(--color-foreground));
  outline: none;
}

.active-facets__button .svg-wrapper {
  align-self: center;
  flex-shrink: 0;
  margin-left: 0.6rem;
  margin-right: -0.2rem;
  pointer-events: none;
  width: 1.2rem;
}

@media all and (min-width: 990px) {
  .active-facets__button .svg-wrapper {
    margin-right: -0.4rem;
    margin-top: 0.1rem;
    width: 1.2rem;
  }
}

.active-facets facet-remove:only-child {
  display: none;
}

.facets-vertical .active-facets .active-facets-vertical-filter:only-child > facet-remove {
  display: none;
}

.facets-vertical .active-facets-vertical-filter {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.facets-vertical .active-facets-vertical-filter .active-facets__button-wrapper {
  padding-top: 0;
  display: flex;
  align-items: flex-start;
}

.facets-vertical .active-facets__button {
  margin-top: 0;
}

.active-facets__button.disabled,
.mobile-facets__clear.disabled {
  pointer-events: none;
}

.mobile-facets__clear-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

.mobile-facets {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(var(--color-foreground), 0.5);
  pointer-events: none;
}

.mobile-facets__disclosure {
  display: flex;
}

.mobile-facets__wrapper {
  margin-left: 0;
  display: flex;
}

.mobile-facets__wrapper .disclosure-has-popup[open] > summary::before {
  height: 100vh;
  z-index: 3;
}

.mobile-facets__inner {
  background-color: rgb(var(--color-background));
  width: calc(100% - 5rem);
  margin-left: auto;
  height: 100%;
  overflow-y: auto;
  pointer-events: all;
  transition: transform var(--duration-default) ease;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  border-style: solid;
  border-width: 0 0 0 var(--drawer-border-width);
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

.menu-opening .mobile-facets__inner {
  transform: translateX(0);
}

.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
  transform: translateX(105vw);
}

.mobile-facets__header {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding: 1rem 2.5rem;
  text-align: center;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 2;
}

.mobile-facets__header-inner {
  flex-grow: 1;
  position: relative;
}

.mobile-facets__info {
  padding: 0 2.6rem;
}

.mobile-facets__heading {
  font-size: calc(var(--font-heading-scale) * 1.4rem);
  margin: 0;
}

.mobile-facets__count {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.3rem;
  margin: 0;
  flex-grow: 1;
}

.mobile-facets__open-wrapper {
  display: inline-block;
}

.mobile-facets__open {
  text-align: left;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  color: rgba(var(--color-link), var(--alpha-link));
}

.mobile-facets__open:hover {
  color: rgb(var(--color-link));
}

.mobile-facets__open:hover line,
.mobile-facets__open:hover circle {
  stroke: rgb(var(--color-link));
}

.mobile-facets__open-label {
  transition: text-decoration var(--duration-short) ease;
}

.mobile-facets__open:hover .mobile-facets__open-label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.mobile-facets__open > * + * {
  margin-left: 1rem;
}

.mobile-facets__open .svg-wrapper {
  width: 2rem;
}

.mobile-facets__open line,
.mobile-facets__open circle {
  stroke: rgba(var(--color-link), var(--alpha-link));
}

.mobile-facets__close {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0.7rem;
  right: 1rem;
  width: 4.4rem;
  height: 4.4rem;
  z-index: 101;
  opacity: 0;
  transition: opacity var(--duration-short) ease;
}

.mobile-facets__close .svg-wrapper {
  width: 2.2rem;
}

details.menu-opening .mobile-facets__close {
  display: flex;
  opacity: 1;
}

details.menu-opening .mobile-facets__close .svg-wrapper {
  margin: 0;
}

.mobile-facets__close-button {
  align-items: center;
  background-color: transparent;
  font-size: 1.4rem;
  font: inherit;
  letter-spacing: inherit;
  margin-top: 1.5rem;
  padding: 1.2rem 2.6rem;
  text-decoration: none;

  display: grid;
  grid-template-columns: min-content 1fr;
  text-align: start;
}

.mobile-facets__close-button > .facets__and-helptext {
  grid-column-start: 2;
}

.mobile-facets__close-button .icon-arrow {
  transform: rotate(180deg);
  margin-right: 1rem;
}

.mobile-facets__main {
  padding: 2.7rem 0 0;
  position: relative;
  z-index: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-facets__details[open] .icon-caret {
  transform: rotate(180deg);
}

.mobile-facets__highlight {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  background-color: rgba(var(--color-foreground), 0.04);
  opacity: 0;
  visibility: hidden;
}

.mobile-facets__checkbox:checked + .mobile-facets__highlight {
  opacity: 1;
  visibility: visible;
}

.mobile-facets__summary {
  padding: 1.3rem 2.5rem;
}

.mobile-facets__summary .svg-wrapper {
  margin-left: auto;
}

.mobile-facets__summary > div {
  display: flex;
  align-items: center;
}

.js .mobile-facets__submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 3;
  transform: translateX(100%);
  visibility: hidden;
  display: flex;
  flex-direction: column;
}

.js details[open] > .mobile-facets__submenu {
  transition: transform 0.4s cubic-bezier(0.29, 0.63, 0.44, 1), visibility 0.4s cubic-bezier(0.29, 0.63, 0.44, 1);
}

.js details[open].menu-opening > .mobile-facets__submenu {
  transform: translateX(0);
  visibility: visible;
}

.js .menu-drawer__submenu .mobile-facets__submenu {
  overflow-y: auto;
}

.js .mobile-facets .submenu-open {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

.mobile-facets__item {
  position: relative;
}

input.mobile-facets__checkbox {
  border: 0;
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: 2.1rem;
  top: 1.2rem;
  z-index: 0;
  appearance: none;
  -webkit-appearance: none;
}

.mobile-facets__label {
  padding: 1.5rem 2rem 1.5rem 2.5rem;
  width: 100%;
  transition: background-color 0.2s ease;
  word-break: break-word;
  display: flex;
}

.mobile-facets__label > svg {
  background-color: rgb(var(--color-background));
  position: relative;
  z-index: 2;
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.mobile-facets__label .icon-checkmark {
  position: absolute;
  top: 1.9rem;
  left: 2.8rem;
  visibility: hidden;
  width: 11px;
  height: 9px;
}

.mobile-facets__label > input[type='checkbox']:checked ~ .icon-checkmark {
  visibility: visible;
}

.mobile-facets__arrow,
.mobile-facets__summary .icon-caret {
  margin-left: auto;
  display: block;
}

.mobile-facets__footer {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding: 2rem;
  bottom: 0;
  position: sticky;
  display: flex;
  z-index: 2;
  margin-top: auto;
  background-color: rgb(var(--color-background));
  background: var(--gradient-background);
}

.mobile-facets__footer > * + * {
  margin-left: 1rem;
}

.mobile-facets__footer > * {
  width: 50%;
}

.mobile-facets__sort {
  display: flex;
  justify-content: space-between;
}

.mobile-facets__sort label {
  flex-shrink: 0;
}

.mobile-facets__sort .select {
  width: auto;
}

.mobile-facets__sort .select .icon-caret {
  right: 0;
}

.mobile-facets__sort .select__select {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 1.5rem;
}

.product-count {
  align-self: center;
  position: relative;
  text-align: right;
}

.product-count__text {
  font-size: 1.4rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  margin: 0;
}

#ProductCountDesktop.loading,
#ProductCount.loading {
  visibility: hidden;
}

.product-count .loading__spinner,
.product-count-vertical .loading__spinner {
  position: absolute;
  padding-top: 0.6rem;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
}

@media screen and (min-width: 750px) {
  .facets-vertical {
    display: flex;
  }

  .facets-wrap-vertical {
    border: none;
    padding-left: 0;
  }

  .facets__form-vertical {
    display: flex;
    flex-direction: column;
    width: 26rem;
  }

  .facets__disclosure-vertical {
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.1);
    margin-right: 0;
  }

  .facets-vertical .facets__summary {
    padding-top: 1.5rem;
    margin-bottom: 0;
    padding-bottom: 1.5rem;
  }

  .facets__heading--vertical {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
  }

  .facets__header-vertical {
    padding: 1.5rem 2rem 1.5rem 0;
    font-size: 1.4rem;
  }

  .facets__display-vertical {
    padding-bottom: 1.5rem;
  }

  .facets-vertical .facets-wrapper {
    padding-right: 3rem;
  }

  .facets-vertical .facets-wrapper--no-filters {
    display: none;
  }

  .facets-vertical .product-grid-container {
    width: 100%;
  }

  .facets-vertical-form {
    display: flex;
    justify-content: flex-end;
  }

  .product-count-vertical {
    margin-left: 3.5rem;
    position: relative;
  }

  .facets-vertical .active-facets__button-wrapper {
    margin-bottom: 2rem;
  }

  .facets-vertical .facets__price {
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  .facets-vertical .facets__price .field:last-of-type {
    margin-left: 1rem;
  }

  .facets-vertical .active-facets__button {
    margin-bottom: 1.5rem;
  }

  .facets-vertical .facet-checkbox input[type='checkbox'] {
    z-index: 0;
  }

  .facets-vertical .active-facets facet-remove:last-of-type {
    margin-bottom: 1rem;
  }

  .facets-vertical .active-facets {
    margin: 0;
    align-items: flex-start;
  }

  .facets__disclosure-vertical[open] .facets__summary .icon-caret {
    transform: rotate(180deg);
  }

  .facets-container-drawer {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 0;
  }

  .facets-container-drawer .mobile-facets__wrapper {
    margin-right: 2rem;
    flex-grow: 1;
  }

  .facets-container-drawer .product-count {
    margin: 0 0 0.5rem 3.5rem;
  }

  .facets-container-drawer .facets-pill {
    width: 100%;
  }

  .facets-container-drawer .facets__form {
    display: block;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .facets-vertical .active-facets__button {
    padding: 1rem;
    margin-bottom: 0;
    margin-left: -0.5rem;
  }

  .facets-vertical .active-facets__button-remove {
    padding: 0 1rem 1rem;
  }
}

/* --- /theme/component-image-with-text.css --- */
.image-with-text .grid {
  margin-bottom: 0;
}

.image-with-text .grid__item {
  position: relative;
}
.image-with-text__media{
  border:none;
}
@media screen and (min-width: 750px) {
  .image-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.image-with-text__media {
  min-height: 100%;
  overflow: visible;
}

.image-with-text__media--small {
  height: 19.4rem;
}

.image-with-text__media--medium {
  height: 29.6rem;
}

.image-with-text__media--large {
  height: 43.5rem;
}

@media screen and (min-width: 750px) {
  .image-with-text__media--small {
    height: 31.4rem;
  }

  .image-with-text__media--medium {
    height: 46rem;
  }

  .image-with-text__media--large {
    height: 69.5rem;
  }
}

.image-with-text__media--placeholder {
  position: relative;
  overflow: hidden;
}

.image-with-text__media--placeholder:after {
  content: '';
  position: absolute;
  background: rgba(var(--color-foreground), 0.04);
}

.image-with-text__media--placeholder.image-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .image-with-text__media--placeholder.image-with-text__media--adapt {
    height: 30rem;
  }
}

.image-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.image-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in) > .svg-wrapper {
  top: 0;
  left: 0;
  transform: translate(0);
}

.image-with-text__content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-self: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
  position: relative;
  z-index: 1;
}

.image-with-text .grid__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after {
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
}

.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after {
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
}

.image-with-text .image-with-text__media-item > * {
  border-radius: var(--media-radius);
  overflow: hidden;
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
}

.image-with-text .global-media-settings {
  overflow: hidden !important;
}

.image-with-text .image-with-text__text-item > * {
  border-radius: var(--text-boxes-radius);
  overflow: hidden;
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
}

.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item > *,
.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item > * {
  box-shadow: none;
}

@media screen and (max-width: 749px) {
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__media,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media img,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media .placeholder-svg {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__text-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .image-with-text.collapse-borders:not(.image-with-text--overlap) .image-with-text__content {
    border-top: 0;
  }
}

.image-with-text__content--mobile-right > * {
  align-self: flex-end;
  text-align: right;
}

.image-with-text__content--mobile-center > * {
  align-self: center;
  text-align: center;
}

.image-with-text--overlap .image-with-text__content {
  width: 90%;
  margin: -3rem auto 0;
}

@media screen and (min-width: 750px) {
  .image-with-text__grid--reverse .image-with-text__content {
    margin-left: auto;
  }

  .image-with-text__content--bottom {
    justify-content: flex-end;
    align-self: flex-end;
  }

  .image-with-text__content--top {
    justify-content: flex-start;
    align-self: flex-start;
  }

  .image-with-text__content--desktop-right > * {
    align-self: flex-end;
    text-align: right;
  }

  .image-with-text__content--desktop-left > * {
    align-self: flex-start;
    text-align: left;
  }

  .image-with-text__content--desktop-center > * {
    align-self: center;
    text-align: center;
  }

  .image-with-text--overlap .image-with-text__text-item {
    display: flex;
    padding: 3rem 0;
  }

  .image-with-text--overlap .image-with-text__content {
    height: auto;
    width: calc(100% + 4rem);
    min-width: calc(100% + 4rem);
    margin-top: 0;
    margin-left: -4rem;
  }

  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__content {
    margin-left: 0;
    margin-right: -4rem;
  }

  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__text-item {
    justify-content: flex-end;
  }

  .image-with-text--overlap .image-with-text__media-item--top {
    align-self: flex-start;
  }

  .image-with-text--overlap .image-with-text__media-item--middle {
    align-self: center;
  }

  .image-with-text--overlap .image-with-text__media-item--bottom {
    align-self: flex-end;
  }

  .image-with-text__media-item--small,
  .image-with-text__media-item--large + .image-with-text__text-item {
    flex-grow: 0;
  }

  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media
    img,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media
    .placeholder-svg,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__text-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__content,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__content:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__text-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__content,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__content:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media
    img,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media
    .placeholder-svg {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .image-with-text.collapse-borders:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__content {
    border-left: 0;
  }

  .image-with-text.collapse-borders:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__content {
    border-right: 0;
  }
}

.image-with-text:not(.collapse-corners, .image-with-text--overlap) .image-with-text__media-item {
  z-index: 2;
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.image-with-text.image-with-text--overlap .backround-transparent,
.image-with-text:not(.image-with-text--overlap) .background-transparent {
  background: transparent;
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.image-with-text .gradient {
  transform: perspective(0);
}

.image-with-text__content {
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  word-break: break-word;
}

@media screen and (min-width: 990px) {
  .image-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.image-with-text__content > * + * {
  margin-top: 2rem;
}

.image-with-text__content > .image-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.image-with-text__content > :first-child:is(.image-with-text__heading),
.image-with-text__text--caption + .image-with-text__heading,
.image-with-text__text--caption:first-child {
  margin-top: 0;
}

.image-with-text__content :last-child:is(.image-with-text__heading),
.image-with-text__text--caption {
  margin-bottom: 0;
}

.image-with-text__content .button + .image-with-text__text {
  margin-top: 2rem;
}

.image-with-text__content .image-with-text__text + .button {
      color: #2a005e;
    background-color: #4d008c;
    padding: 8px 70px;
    border-radius: 15px;
    line-height: 1.5;
    font-family: Chillax, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 24px;
    text-decoration: none;
    background: linear-gradient(to bottom, #fbffb4, #f2ff00, #f2ff00, #afb900);
    box-shadow: 0 9px 4px #0003;
    transition: all .3s;
    border:none;
}
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    box-shadow: none;
}
.button:not([disabled]):hover:after, .shopify-challenge__button:hover:after, .customer button:hover:after, .shopify-payment-button__button--unbranded:hover:after {
    box-shadow: none;
}
.image-with-text__content .image-with-text__text + .button:hover {
      background: linear-gradient(to bottom, #fff7a6, #ff0, #d5cc00, #999000);
    box-shadow: 0 12px 6px #0000004d;
}
.image-with-text__heading {
  color:#fff;
  margin-bottom: 0;
  font-size:32px;
  line-height: 1.4;
}

.image-with-text__text p {
  color:#fff;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size:22px;
  font-weight: 500;
}

@media screen and (max-width: 749px) {
  .image-with-text__text p {
    font-size:15px;
    text-align: center;
}
  .image-with-text__content {
    align-items: center !important;
    display: flex;
}
  .image-with-text__heading {
    font-size: 24px;
    text-align: center;
}
  .image-with-text {
        margin: 0 26px 0 26px;
  }
  .image-with-text__content{
    padding: 0;
  }
  .collapse-padding .image-with-text__grid .image-with-text__content {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 750px) {
  .collapse-padding
    .image-with-text__grid:not(.image-with-text__grid--reverse)
    .image-with-text__content:not(.image-with-text__content--desktop-center) {
    padding-right: 0;
  }

  .collapse-padding
    .image-with-text__grid--reverse
    .image-with-text__content:not(.image-with-text__content--desktop-center) {
    padding-left: 0;
  }
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .image-with-text .grid {
    margin-left: 0;
  }
}

/*
  Multirow
  note: consider removing from this stylesheet if multirow-specific styles increase signficantly
*/
.multirow__inner {
  display: flex;
  flex-direction: column;
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .multirow__inner {
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}
@media (max-width: 860px){
  .image-with-text__content
  .image-with-text__text+.button {
width: 100%;
}
  .image-with-text__content h2 p {
    padding: 10px;
  }
}
/* --- /theme/component-list-menu.css --- */
.list-menu--right {
  right: 0;
}

.list-menu--disclosure {
  position: absolute;
  min-width: 100%;
  width: 25rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
}

.list-menu--disclosure:focus {
  outline: none;
}

.list-menu__item--active {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.list-menu__item--active:hover {
  text-decoration-thickness: 0.2rem;
}

.list-menu--disclosure.localization-selector {
  max-height: 18rem;
  overflow: auto;
  width: 10rem;
  padding: 0.5rem;
}

/* --- /theme/component-loading-overlay.css --- */
.loading-overlay {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1;
}

@media screen and (min-width: 750px) {
  .loading-overlay {
    top: 2rem;
    right: 4rem;
  }
}

.loading-overlay__spinner {
  width: 1.8rem;
}

.loading-overlay__spinner .path {
  stroke: rgba(var(--color-foreground), 0.75);
}

/* --- /theme/component-menu-drawer.css --- */
.header__icon--menu {
  position: initial;
}
.menu-drawer__grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap:15px;
}
.menu-drawer__grid-wrapper{
  padding: 11px 25px;
}
.menu-drawer__grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    color: #fff;
}
.menu-drawer__grid-item:hover .grid-menu-mob-image-container {
  background-color: #F2FF00;
}
.menu-drawer__grid-item:hover .menu-drawer__grid-title {
  color:#F2FF00;
}
.menu-drawer__grid-item span{
  font-size: 14px;
    margin-top: 5px;
      transition: 0.3s ease;
}
.grid-menu-mob-image-container{
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F2FF00;
    border-radius: 17px;
    padding: 5px;
      transition: 0.3s ease;
}

.menu-drawer__grid-item img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: brightness(1.2) contrast(1.1);
}
.js menu-drawer > details > summary::before,
.js menu-drawer > details[open]:not(.menu-opening) > summary::before {
  content: '';
  position: absolute;
  cursor: default;
  width: 100%;
  height: calc(100vh - 100%);
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  top: 100%;
  left: 0;
  background: rgba(var(--color-foreground), 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: opacity 0s, visibility 0s;
}

menu-drawer > details[open] > summary::before {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
}

.menu-drawer {
  position: absolute;
  transform: translateX(-100%);
  visibility: hidden;
  z-index: 3;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

.js .menu-drawer {
  height: calc(100vh - 100%);
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
}

.js details[open] > .menu-drawer,
.js details[open] > .menu-drawer__submenu {
  transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
}

.js details[open].menu-opening > .menu-drawer,
details[open].menu-opening > .menu-drawer__submenu {
  transform: translateX(0);
  visibility: visible;
  background: linear-gradient(to bottom, #D623ED, #8400D6);
}

.js .menu-drawer__navigation .submenu-open {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

@media screen and (min-width: 750px) {
  .menu-drawer {
    width: 40rem;
    border-width: 0 var(--drawer-border-width) 0 0;
    border-style: solid;
    border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  }
}

.menu-drawer__inner-container {
  position: relative;
  height: 100%;
}

.menu-drawer__navigation-container {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: space-between;
  overflow-y: auto;
  height: 100%;
}

.menu-drawer__navigation {
  padding: 3rem 0;
  background: linear-gradient(to bottom, #D623ED, #8400D6);
}

.menu-drawer__inner-submenu {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(to bottom, #D623ED, #8400D6);
}

.js .menu-drawer__menu li {
  margin-bottom: 0.2rem;
}

.menu-drawer__menu-item {
  padding: 1.1rem 3rem;
  text-decoration: none;
  font-size: 2rem;
}

.menu-drawer summary.menu-drawer__menu-item {
  padding-right: 5.2rem;
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__close-button:focus,
.menu-drawer__menu-item:hover,
.menu-drawer__close-button:hover {
  background-color: rgba(var(--color-foreground), 0.04);
  text-decoration: underline;
}

.menu-drawer__menu-item--active:hover {
  background-color: rgba(var(--color-foreground), 0.08);
}

.js .menu-drawer__menu-item .icon-caret {
  display: none;
}

.menu-drawer__menu-item > .svg-wrapper {
  width: 15px;
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
}

.js .menu-drawer__submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
  transform: translateX(100%);
  visibility: hidden;
}

.js .menu-drawer__submenu .menu-drawer__submenu {
  overflow-y: auto;
}

.menu-drawer__close-button {
  margin-top: 1.5rem;
  padding: 1.2rem 2.6rem 1.2rem 3rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  width: 100%;
  background-color: transparent;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  text-align: left;
  color:#fff;
  gap:10px;
}
.menu-drawer__close-button svg{
  transform: rotate(180deg);
}
.menu-drawer__close-button .svg-wrapper {
  transform: rotate(180deg);
  margin-right: 1rem;
  width: 15px;
}

.menu-drawer__utility-links {
  padding: 0;
  background-color: rgba(var(--color-foreground), 0.03);
  position: relative;
}

.header--has-social .menu-drawer__utility-links {
  padding: 2rem 3rem;
}

@media screen and (max-width: 749px) {
  .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
    padding: 2rem 3rem;
  }
}

@media screen and (max-width: 989px) {
  .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
    padding: 2rem 3rem;
  }
}
@media screen and (max-width: 375px) {
.menu-drawer__grid-item img {
  width: 75px;
  height: 75px;
}
}

.menu-drawer__account {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 1rem 0;
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
  margin-bottom: 0;
}

.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
  margin: 0;
}

.menu-drawer__account account-icon > .svg-wrapper {
  height: 2rem;
  width: 2rem;
  margin-right: 1rem;
}

.menu-drawer__account shop-user-avatar {
  --shop-avatar-size: 2.4rem;
  margin-right: 0.55rem;
  margin-left: -0.45rem;
}

.menu-drawer__account:hover account-icon > .svg-wrapper {
  transform: scale(1.07);
}

.menu-drawer .list-social {
  justify-content: flex-start;
  margin-left: -1.25rem;
}

.menu-drawer .list-social:empty {
  display: none;
}

.menu-drawer .list-social__link {
  padding: 1.1rem 1.1rem;
}

@media screen and (max-width: 749px) {
  .menu-drawer.country-selector-open {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* --- /theme/component-newsletter.css --- */
.newsletter-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

@media screen and (min-width: 750px) {
  .newsletter-form {
    align-items: flex-start;
    margin: 0 auto;
    max-width: 36rem;
  }
}

.newsletter-form__field-wrapper {
  width: 100%;
}

.newsletter-form__field-wrapper .field__input {
  padding-right: 5rem;
}

.newsletter-form__field-wrapper .field {
  z-index: 0;
}

.newsletter-form__message {
  justify-content: center;
  margin-bottom: 0;
}

.newsletter-form__message--success {
  margin-top: 2rem;
}

@media screen and (min-width: 750px) {
  .newsletter-form__message {
    justify-content: flex-start;
  }
}

.newsletter-form__button {
  width: 4.4rem;
  margin: 0;
  right: var(--inputs-border-width);
  top: 0;
  height: 100%;
  z-index: 2;
}

.newsletter-form__button:focus-visible {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.4rem rgba(var(--color-foreground));
  background-color: rgb(var(--color-background));
}

.newsletter-form__button:focus {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.4rem rgba(var(--color-foreground));
  background-color: rgb(var(--color-background));
}

.newsletter-form__button:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.newsletter-form__button .icon {
  width: 1.5rem;
}

/* --- /theme/component-pagination.css --- */
.svg-wrapper-grid{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
}
.pagination-wrapper {
  margin-top: 4rem;
  color: #000;
  font-family: "Outfit", sans-serif;
  font-weight: 400;
}

.pagination__item-arrow {
    background-color: #8400D6;
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    transition: .3s ease;
    
}
.product_count{
  display: none;
}
.pagination__item-arrow:hover,
.pagination__item-arrow:active {
  background-color: #F2FF00;

}
.pagination__item-arrow:hover svg path,
.pagination__item-arrow:active svg path {
    fill:#2A005E;
}

.pagination__item[aria-current="page"] {
    background-color: #8400D6;
    color: #fff;
    opacity: 1;
    border-radius: 13px;
}

.pagination__item[aria-current="page"]::after {
  display: none;
}

@media screen and (min-width: 990px) {
  .pagination-wrapper {
    margin-top: 5rem;
  }
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination__list>li {
  flex: 1 0 4.4rem;
  max-width: 4.4rem;
}

.pagination__list>li:not(:last-child) {
  margin-right: 1rem;
}

.pagination__item {
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 4.4rem;
  width: 100%;
  padding: 0;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 13px;
}

a.pagination__item:hover::after {
  height: 0.1rem;
}

.pagination__item .icon-caret {
  height: 0.6rem;
}

.pagination__item--current::after {
  height: 0.1rem;
}



.pagination__item--next .icon {
  margin-left: -0.2rem;
  transform: rotate(90deg);
}

.pagination__item--next:hover .icon {
  transform: rotate(90deg) scale(1.07);
}

.pagination__item--prev .icon {
  margin-right: -0.2rem;
  transform: rotate(-90deg);
}

.pagination__item--prev:hover .icon {
  transform: rotate(-90deg) scale(1.07);
}

.pagination__item-arrow:hover::after {
  display: none;
}

.load_btn {
  display: none;
}

@media screen and (max-width:750px) {
  .pagination {
    display: none;
  }
.product_count{
  display: block;
  color: #fff;
}
  .load_btn {
        display: block;
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #2A005E;
        border-radius: 19px;
        width: 80%;
        font-size: 18px;
        text-transform: uppercase;
        padding: 10px;
        cursor: pointer;
        margin: 15px auto 0;
        transition: all .3s;
        background: linear-gradient(to bottom, #fbffb4, #f2ff00, #f2ff00, #afb900);
        box-shadow: 0 9px 4px #0003;
        border:none;
  }

  .load_btn:hover,
  .load_btn:active {
        background: linear-gradient(to bottom, #fff7a6, #ff0, #d5cc00, #999000);
        box-shadow: 0 12px 6px #0000004d;
  }

 .pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px !important;
  }
}
@media screen and (max-width:860px) {
  .pagination__item {
    color: #fff;
    
}
  .pagination__item-arrow{
    border: .5px solid #4D008C;
  }
  .svg-wrapper-grid path{
    fill: #fff;
  }
}
/* --- /theme/component-predictive-search.css --- */
.predictive-search {
  display: none;
  position: absolute;
  top: calc(100% + 0.1rem);
  left: -0.1rem;
  border-width: var(--popup-border-width);
  border-style: solid;
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  background-color: rgb(var(--color-background));
  z-index: 3;
  border-bottom-right-radius: var(--popup-corner-radius);
  border-bottom-left-radius: var(--popup-corner-radius);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.center{
  color:#fff;
}
.predictive-search--search-template {
  z-index: 2;
  width: calc(100% + 0.2rem);
}

.predictive-search__results-groups-wrapper {
  display: flex;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding-bottom: 1rem;
}

@media screen and (max-width: 749px) {
  .predictive-search--header {
    right: 0;
    left: 0;
    top: 100%;
  }

  .predictive-search__results-groups-wrapper {
    flex-direction: column;
  }

  .predictive-search__results-groups-wrapper:not(.predictive-search__results-groups-wrapper--no-suggestions) {
    /* On mobile, when there are no suggestions the first .predictive-search__results-groups-wrapper
     * is virtually empty due to a display: hidden on the predictive-search__pages-wrapper child.
     * This causes the gap to render and look like a big top margin */
    gap: 2rem;
  }
}

@media screen and (min-width: 750px) {
  .predictive-search {
    border-top: none;
    width: calc(100% + 0.2rem);
  }

  .header predictive-search {
    position: relative;
  }
}

predictive-search[open] .predictive-search,
predictive-search[loading] .predictive-search {
  display: block;
}

.predictive-search__result-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 2rem;
}

.predictive-search__result-group:first-child .predictive-search__pages-wrapper {
  display: none;
}

@media screen and (min-width: 750px) {
  .predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:nth-child(2),
  .predictive-search__result-group:last-child .predictive-search__pages-wrapper {
    display: none;
  }
  .predictive-search__result-group:first-child .predictive-search__pages-wrapper {
    display: initial;
  }
  .predictive-search__result-group:first-child {
    flex: 0 0 26.4rem;
  }
  .predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:first-child,
  .predictive-search__result-group:only-child {
    flex-grow: 1;
  }
}

.predictive-search__heading {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  margin: 0 2rem;
  padding: 1.5rem 0 0.75rem;
  color: rgba(var(--color-foreground), 0.7);
}

predictive-search .spinner {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 0;
}

predictive-search:not([loading]) .predictive-search__loading-state,
predictive-search:not([loading]) .predictive-search-status__loading {
  display: none;
}

predictive-search[loading] .predictive-search__loading-state {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

predictive-search[loading] .predictive-search__search-for-button {
  display: none;
}

predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__loading-state {
  display: none;
}

predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__search-for-button {
  display: initial;
}

.predictive-search__list-item[aria-selected='true'] > *,
.predictive-search__list-item:hover > *,
.predictive-search__item[aria-selected='true'],
.predictive-search__item:hover {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground), 0.04);
}

.predictive-search__list-item[aria-selected='true'] .predictive-search__item-heading,
.predictive-search__list-item:hover .predictive-search__item-heading {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.predictive-search__item {
  display: flex;
  padding: 1rem 2rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.predictive-search__item--link-with-thumbnail {
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-column-gap: 2rem;
  grid-template-areas: 'product-image product-content';
}

.predictive-search__item-content {
  grid-area: product-content;
  display: flex;
  flex-direction: column;
}

.predictive-search__item-content--centered {
  justify-content: center;
}

.predictive-search__item-vendor {
  font-size: 0.9rem;
}

.predictive-search__item-heading {
  margin: 0;
}

.predictive-search__item-query-result *:not(mark) {
  font-weight: bolder;
}

.predictive-search__item-query-result mark {
  color: rgba(var(--color-foreground), 0.75);
}

.predictive-search__item-query-result mark {
  background-color: transparent;
}

.predictive-search__item .price {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.2rem;
}

.predictive-search__item-vendor + .predictive-search__item-heading,
.predictive-search .price {
  margin-top: 0.5rem;
}

.predictive-search__item--term {
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 2rem;
  word-break: break-all;
  line-height: calc(1 + 0.4 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .predictive-search__item--term {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.predictive-search__item--term .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.4rem);
  height: calc(var(--font-heading-scale) * 1.4rem);
  flex-shrink: 0;
  margin-left: calc(var(--font-heading-scale) * 2rem);
  color: rgb(var(--color-link));
}

.predictive-search__image {
  grid-area: product-image;
  object-fit: contain;
  font-family: 'object-fit: contain';
}

/* --- /theme/component-price.css --- */
.price {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  color: rgb(var(--color-foreground));
}

.price > * {
  display: inline-block;
  vertical-align: top;
}

.price.price--unavailable {
  visibility: hidden;
}

.price--end {
  text-align: right;
}

.price .price-item {
  display: inline-block;
  margin: 0 1rem 0 0;
}

.price__regular .price-item--regular {
  margin-right: 0;
}

.price:not(.price--show-badge) .price-item--last:last-of-type {
  margin: 0;
}

@media screen and (min-width: 750px) {
  .price {
    margin-bottom: 0;
  }
}

.price--large {
  font-size: 1.6rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.13rem;
}

@media screen and (min-width: 750px) {
  .price--large {
    font-size: 1.8rem;
  }
}

.price--sold-out .price__availability,
.price__regular {
  display: block;
}

.price__sale,
.price__availability,
.price .price__badge-sale,
.price .price__badge-sold-out,
.price--on-sale .price__regular,
.price--on-sale .price__availability {
  display: none;
}

.price--sold-out .price__badge-sold-out,
.price--on-sale .price__badge-sale,
.volume-pricing--sale-badge .price__badge-sale {
  display: inline-block;
}

.volume-pricing--sale-badge .price__badge-sale {
  margin-left: 0.5rem;
}

.price--on-sale .price__sale {
  display: initial;
  flex-direction: row;
  flex-wrap: wrap;
}

.price--center {
  display: initial;
  justify-content: center;
}

.price--on-sale .price-item--regular {
  text-decoration: line-through;
  color: #fff;
  font-size: 1.3rem;
}

.unit-price {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.04rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  margin-top: 0.2rem;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.7);
}

/* --- /theme/component-search.css --- */
.search__input.field__input {
  padding-right: 9.8rem;
}

.search__button {
  right: var(--inputs-border-width);
  top: var(--inputs-border-width);
}

.reset__button {
  right: calc(var(--inputs-border-width) + 4.4rem);
  top: var(--inputs-border-width);
}

.reset__button:not(:focus-visible)::after {
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
  display: block;
  height: calc(100% - 1.6rem);
  content: '';
  position: absolute;
  right: 0;
}

.reset__button:not(:focus)::after {
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
  display: block;
  height: calc(100% - 1.8rem);
  content: '';
  position: absolute;
  right: 0;
}

.search__button:focus-visible,
.reset__button:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 4;
}

.search__button:focus,
.reset__button:focus {
  background-color: rgb(var(--color-background));
  z-index: 4;
}

.search__button:not(:focus-visible):not(.focused),
.reset__button:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.search__button:hover .icon,
.reset__button:hover .icon {
  transform: scale(1.07);
}

.search__button .icon {
  height: 1.8rem;
  width: 1.8rem;
}

.reset__button .icon.icon-close {
  height: 1.8rem;
  width: 1.8rem;
  stroke-width: 0.1rem;
}

/* Remove extra spacing for search inputs in Safari */
input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.template-search__results {
  position: relative;
}

/* --- /theme/component-slider.css --- */
.slider{
  padding: 0 !important;
}
slider-component {
  --desktop-margin-left-first-item: max(
    5rem,
    calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
  );
  position: relative;
  display: block;
}

slider-component.slider-component-full-width {
  --desktop-margin-left-first-item: 1.5rem;
}

@media screen and (max-width: 749px) {
  slider-component.page-width {
    padding: 0 1.5rem;
  }
}

@media screen and (min-width: 749px) and (max-width: 990px) {
  slider-component.page-width {
    padding: 0 5rem;
  }
}

.slider__slide {
  --focus-outline-padding: 0.5rem;
  --shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
  --shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
  scroll-snap-align: start;
  flex-shrink: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 860px) {
  .slider.slider--mobile {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--mobile:after {
    content: '';
    width: 0;
    padding-left: 1.5rem;
  }

  .slider.slider--mobile .slider__slide {
    margin-bottom: 0;
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--mobile.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media screen and (min-width: 860px) {
  .slider.slider--tablet-up {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .slider.slider--tablet-up .slider__slide {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 989px) {
  .slider.slider--tablet {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--tablet:after {
    content: '';
    width: 0;
    padding-left: 1.5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }

  .slider.slider--tablet .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: 25px;
  }
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: 25px;
    max-width: 49%;
  }
}

  .slider.slider--tablet.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

.slider--everywhere {
  position: relative;
  flex-wrap: inherit;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.slider.slider--everywhere .slider__slide {
  margin-bottom: 0;
  scroll-snap-align: center;
}

@media screen and (min-width: 990px) {
    .slider--desktop:after {
    content: '';
    width: 0;
    padding-left: 5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }
  .slider-component-desktop.page-width {
    max-width: none;
  }

  .slider--desktop {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    scroll-padding-left: var(--desktop-margin-left-first-item);
  }

  /* Fix to show some space at the end of our sliders in all browsers */
/*  .slider--desktop:after {
    content: '';
    width: 0;
    padding-left: 5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }
*/
  .slider.slider--desktop .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }


  .slider-component-full-width .slider--desktop {
    scroll-padding-left: 1.5rem;
  }


  /* Fix to show some space at the end of our sliders in all browsers */
  .slider-component-full-width .slider--desktop:after {
    padding-left: 1.5rem;
  }

  .slider--desktop.grid--5-col-desktop .grid__item {
    width: calc(100% / 5 - var(--grid-desktop-horizontal-spacing) * 2);
  }

  .slider--desktop.grid--4-col-desktop .grid__item {
    width: calc(100%  / 4 - var(--grid-desktop-horizontal-spacing) * 3);
  }

  .slider--desktop.grid--3-col-desktop .grid__item {
    width: calc(100%  / 3 - var(--grid-desktop-horizontal-spacing) * 4);
  }
  [class*="_video"] .slider--desktop.grid--3-col-desktop .grid__item {
    width: 100%;
  }

  .slider--desktop.grid--2-col-desktop .grid__item {
    width: calc(100%  / 2 - var(--grid-desktop-horizontal-spacing) * 5);
  }

  .slider--desktop.grid--1-col-desktop .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) * 9);
  }

  .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    /*padding-bottom: var(--focus-outline-padding);*/
    padding-bottom:25px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .slider.slider--desktop.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media (prefers-reduced-motion) {
  .slider {
    scroll-behavior: auto;
  }
}

/* Scrollbar */

.slider {
  scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  height: 0.4rem;
  width: 0.4rem;
  display: none;
}

.slider::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  border: 0;
}

.slider::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
}

.slider-counter {
  display: none;
  justify-content: center;
  min-width: 4.4rem;
}

@media screen and (min-width: 750px) {
  .slider-counter--dots {
    margin: 0 1.2rem;
  }
}

.slider-counter__link {
  padding: 1rem;
}

@media screen and (max-width: 749px) {
  .slider-counter__link {
    padding: 0.7rem;
  }
}

.slider-counter__link--dots .dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.5);
  padding: 0;
  display: block;
}

.slider-counter__link--active.slider-counter__link--dots .dot {
  background-color: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: CanvasText;
  }
}

.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
  border-color: rgb(var(--color-foreground));
}

.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
  transition: transform 0.2s ease-in-out;
}

.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover {
  transform: scale(1.1);
}

.slider-counter__link--numbers {
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: none;
}

.slider-counter__link--numbers:hover {
  color: rgb(var(--color-foreground));
}

.slider-counter__link--active.slider-counter__link--numbers {
  text-decoration: underline;
  color: rgb(var(--color-foreground));
}

.slider-buttons {
  display: flex;
  align-items: center;
  gap:30px;
  justify-content: center;
  margin-right: 26px;
}
@media(min-width:860px){
.slider-buttons-padding{
  padding: 0 80px 0 80px;
}
}
.slider-buttons_wrapper{
    display: flex;
  align-items: center;
  gap:10px;
}


@media screen and (max-width: 860px) {
  
.slider-buttons_wrapper{
}
  .progress-bar{
    width: 55% !important;
    border: 1px solid #fff !important;
  }
  .progress-bar-fill{
    background-color: #fff;
  }
.slider-buttons {
  display: flex;
  align-items: center;
  gap:10px;
  justify-content: space-between;
}
}

.slider-button {
  color: rgba(var(--color-foreground), 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

.slider-button .icon {
  height: 0.6rem;
}

.slider-button[disabled] .icon {
  color: rgba(var(--color-foreground), 0.3);
  cursor: not-allowed;
}

.slider-button--next .icon {
  transform: rotate(-90deg);
}

.slider-button--prev .icon {
  transform: rotate(90deg);
}

.slider-button--next:not([disabled]):hover .icon {
  transform: rotate(-90deg) scale(1.1);
}

.slider-button--prev:not([disabled]):hover .icon {
  transform: rotate(90deg) scale(1.1);
}



/* --- /theme/component-slideshow.css --- */
slideshow-component {
  position: relative;
  display: flex;
  flex-direction: column;
}

slideshow-component .slideshow.banner {
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  gap: 0;
  overflow-y: hidden;
}

.slideshow__slide {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  visibility: visible;
}

@media screen and (max-width: 749px) {
  .slideshow--placeholder.banner--mobile-bottom.banner--adapt_image .slideshow__media,
  .slideshow--placeholder.banner--adapt_image:not(.banner--mobile-bottom) {
    height: 28rem;
  }
}

@media screen and (min-width: 750px) {
  .slideshow--placeholder.banner--adapt_image {
    height: 56rem;
  }
}

.slideshow__text.banner__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 54.5rem;
}

.slideshow__text > * {
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  slideshow-component.page-width .slideshow__text {
    border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
    border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  }

  .banner--mobile-bottom .slideshow__text.banner__box {
    max-width: 100%;
  }

  .banner--mobile-bottom .slideshow__text-wrapper {
    flex-grow: 1;
  }

  .banner--mobile-bottom .slideshow__text.banner__box {
    height: 100%;
  }

  .banner--mobile-bottom .slideshow__text .button {
    flex-grow: 0;
  }

  .slideshow__text.slideshow__text-mobile--left {
    align-items: flex-start;
    text-align: left;
  }

  .slideshow__text.slideshow__text-mobile--right {
    align-items: flex-end;
    text-align: right;
  }
}

@media screen and (min-width: 750px) {
  .slideshow__text.slideshow__text--left {
    align-items: flex-start;
    text-align: left;
  }

  .slideshow__text.slideshow__text--right {
    align-items: flex-end;
    text-align: right;
  }
}

.slideshow:not(.banner--mobile-bottom) .slideshow__text-wrapper {
  height: 100%;
}

@media screen and (min-width: 750px) {
  .slideshow__text-wrapper.banner__content {
    height: 100%;
    padding: 5rem;
  }
}

.slideshow__controls {
  border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.slideshow__controls--top {
  order: 2;
  z-index: 1;
}

@media screen and (max-width: 749px) {
  .slideshow__controls--border-radius-mobile {
    border-bottom-right-radius: var(--text-boxes-radius);
    border-bottom-left-radius: var(--text-boxes-radius);
  }
}

.spaced-section--full-width:last-child slideshow-component:not(.page-width) .slideshow__controls {
  border-bottom: none;
}

@media screen and (min-width: 750px) {
  .slideshow__controls {
    position: relative;
  }
}

slideshow-component:not(.page-width) .slider-buttons {
  border-right: 0;
  border-left: 0;
}

.slideshow__control-wrapper {
  display: flex;
}

.slideshow__autoplay {
  position: absolute;
  right: 0;
  border-left: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 749px) {
  slideshow-component.page-width .slideshow__autoplay {
    right: 1.5rem;
  }
}

@media screen and (min-width: 750px) {
  .slideshow__autoplay.slider-button {
    position: inherit;
    margin-left: 0.6rem;
    padding: 0 0 0 0.6rem;
    border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.slideshow__autoplay .icon.icon-play,
.slideshow__autoplay .icon.icon-pause {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
  width: 0.8rem;
  height: 1.2rem;
}

.slideshow__autoplay .icon.icon-play {
  height: 1rem;
}

.slideshow__autoplay path {
  fill: rgba(var(--color-foreground), 0.75);
}

.slideshow__autoplay:hover path {
  fill: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .slideshow__autoplay path,
  .slideshow__autoplay:hover path {
    fill: CanvasText;
  }
}

.slideshow__autoplay:hover .svg-wrapper {
  transform: scale(1.1);
}

.slideshow__autoplay--paused .icon-pause,
.slideshow__autoplay:not(.slideshow__autoplay--paused) .icon-play {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

/* --- /theme/component-totals.css --- */
.totals {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.totals > * {
  font-size: 1.6rem;
  margin: 0;
}

.totals > h2 {
  font-size: calc(var(--font-heading-scale) * 1.6rem);
}

.totals * {
  line-height: 1;
}

.totals > * + * {
  margin-left: 2rem;
}

.totals__total {
  margin-top: .5rem;
}

.totals__total-value {
  font-size: 1.8rem;
}

.cart__ctas + .totals {
  margin-top: 2rem;
}

@media all and (min-width: 750px) {
  .totals {
    justify-content: flex-end;
  }
}

/* --- /theme/faq.css --- */
.faq-section {
    background-color: #D623ED;
    margin-top: 20px;
    position: relative;
}

.faq-section>div {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 50px
}

.faq_blocks {
    padding: 70px 0;
    max-width: 50%;
}

.faq_title {
    color: #2A005E;
    font-size: 36px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.faq-block {
    color: #fff;
margin-bottom: 25px;
    font-size: 25px;
    cursor: pointer;
    font-family: "Outfit", sans-serif;
}

.faq-block_title {
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-end;
}

.faq-block_text {
    margin: 10px 0 0 0;
    transition: all 0.3s;
    overflow: hidden;
    font-weight: 400;
    max-height: 0;
    max-width: 75%;
    line-height: 114.99999999999999%;
}

.faq-block_title svg {
    transition: all 0.3s;
    margin-bottom: 15px;
}

.open .faq-block_text {
    max-height: 2000px;
}

/* paragraphs inside an answer (FAQ text split on blank line) */
.faq-block_p {
    margin: 0;
}

.faq-block_p + .faq-block_p {
    margin-top: 16px;
}

.open .faq-block_title svg {
    transform: rotate(180deg);
}

.faq_image-container {
    padding-top: 70px;
}

.faq_image-container img {
    width: 100%;
}

@media screen and (max-width:1100px) {

    .faq-block_text,
    .faq-block_title {
        font-size: 20px;
    }
}

@media screen and (max-width:960px) {

    .faq-block_text,
    .faq-block_title {
        font-size: 16px;
    }
}

@media screen and (max-width:860px) {

    .faq_image-container {
        display: none;
    }

    .faq_blocks {
        max-width: 100%;
        padding: 20px 36px;
    }
}
/* --- /theme/footer.css --- */
.footer-dropdown_open svg path{
  stroke: #2A005E;
}
.svg-wrapper svg path{
  stroke:#2A005E;
}
footer {
    background-color: #F2FF00;
    border-top: 1px solid #000;
}

.footer_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.footer-cta_block {
    padding-right: 30px;
    padding-bottom: 80px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
  padding-top: 50px;
}

.footer-dropdown_open svg {
    transition: all 0.3s;
    
}


.opened svg {
    transform: rotate(180deg);
}

.field:hover.field::after {
    border-radius: 12px;
}

.footer-cta_title {
    font-size: 30px;
    color: #2A005E;
    line-height: 1.2;
    text-transform: uppercase;
}

.footer-block__newsletter {
    width: 100%;
    max-width: 360px;
}

.footer-menu_block {
    padding-left: 30px;
  padding-top: 50px;
  border-left: 1px solid #000;
    padding-bottom: 80px;
}

.footer-menu {
    max-width: 360px;
}

.footer-menu_block ul {
    padding: 0;
    list-style: none;
}

.footer-menu_block a:link,
.footer-menu_block a:visited {
    font-family: "Outfit", sans-serif;
    color: #2A005E;
    font-weight: 500;
    font-size: 17px;
    text-decoration: underline;
    letter-spacing: 0;
}
.footer-menu_block a:hover {
    font-family: "Outfit", sans-serif;
    color: #2A005E;
    font-weight: 500;
    font-size: 17px;
    text-decoration: none;
    
}

.footer-menu_block p {
    margin: 0;
    cursor: pointer;
    font-family: "Outfit", sans-serif;
    color: #2A005E;
    font-weight: 500;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.footer-link {
    margin: 12px 0;
}

.footer-dropdown {
    margin: 12px 0;
}

.footer-dropdown_menu {
    padding-left: 20px !important;
    transition: all 0.3s;
    max-height: 0;
    overflow: hidden;

}

.footer-dropdown_menu a:link,
.footer-dropdown_menu a:visited {
    font-weight: 400;
}

.footer-dropdown_menu_open {
    max-height: 300px;
}

.footer-block__newsletter input {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
    height: 55px;
}

.footer-links {
    display: flex;
    justify-content: end;
    gap: 16px
}

.field__input:focus {
    border-radius: 12px;
}


.field__label {
    top: 50%;
    transform: translateY(-50%);
    font-family: "Outfit", sans-serif;
    color: #2A005E;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.field__label-comment{
  top: 25%;
}
.field__input:focus ~ .field__label {
  top: 10px;
}

.newsletter-form__button {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

@media screen and (max-width:860px) {
    .footer_container {
        padding: 20px 36px 0;
        grid-template-columns: 1fr;
    }

    .footer-cta_block {
        padding: 0;
        border: none;
    }

    .footer-menu_block {
        padding: 0 0 30px;
        border: none;
    }

    .footer-cta_title {
        font-size: 20px;
    }

    .field__label {

        color: #000;
        font-size: 13px;

    }

    .newsletter-form__button {
        right: 5px;
    }
}
/* --- /theme/mask-blobs.css --- */
:root {
    --shape--blob-1: 97.686% 33.617%, 98.392% 36.152%, 98.960% 38.721%, 99.398% 41.315%, 99.712% 43.928%, 99.909% 46.552%, 99.995% 49.182%, 99.974% 51.813%, 99.852% 54.441%, 99.630% 57.063%, 99.311% 59.675%, 98.897% 62.274%, 98.389% 64.856%, 97.787% 67.417%, 97.091% 69.955%, 96.299% 72.464%, 95.411% 74.941%, 94.422% 77.379%, 93.329% 79.773%, 92.127% 82.114%, 90.812% 84.393%, 89.377% 86.598%, 87.813% 88.714%, 86.114% 90.723%, 84.272% 92.600%, 82.279% 94.317%, 80.125% 95.828%, 77.832% 97.117%, 75.423% 98.172%, 72.920% 98.983%, 70.352% 99.552%, 67.743% 99.887%, 65.115% 100.000%, 62.485% 99.907%, 59.869% 99.627%, 57.277% 99.176%, 54.717% 98.571%, 52.193% 97.825%, 49.711% 96.954%, 47.271% 95.967%, 44.877% 94.876%, 42.529% 93.689%, 40.227% 92.414%, 37.972% 91.058%, 35.764% 89.626%, 33.604% 88.123%, 31.491% 86.555%, 29.426% 84.924%, 27.410% 83.234%, 25.441% 81.487%, 23.522% 79.687%, 21.651% 77.836%, 19.832% 75.935%, 18.064% 73.986%, 16.350% 71.990%, 14.691% 69.947%, 13.090% 67.859%, 11.549% 65.726%, 10.073% 63.547%, 8.665% 61.324%, 7.331% 59.056%, 6.076% 56.744%, 4.907% 54.386%, 3.832% 51.984%, 2.861% 49.539%, 2.006% 47.050%, 1.280% 44.521%, 0.699% 41.955%, 0.280% 39.358%, 0.044% 36.738%, 0.014% 34.107%, 0.212% 31.484%, 0.660% 28.892%, 1.371% 26.359%, 2.338% 23.913%, 3.540% 21.574%, 4.951% 19.354%, 6.546% 17.261%, 8.300% 15.300%, 10.191% 13.471%, 12.199% 11.771%, 14.307% 10.197%, 16.502% 8.746%, 18.771% 7.414%, 21.104% 6.198%, 23.493% 5.094%, 25.930% 4.101%, 28.408% 3.217%, 30.922% 2.439%, 33.466% 1.768%, 36.036% 1.203%, 38.627% 0.744%, 41.235% 0.394%, 43.855% 0.152%, 46.483% 0.023%, 49.114% 0.008%, 51.744% 0.103%, 54.366% 0.315%, 56.977% 0.648%, 59.569% 1.100%, 62.137% 1.672%, 64.676% 2.363%, 67.179% 3.173%, 69.642% 4.101%, 72.056% 5.147%, 74.416% 6.310%, 76.715% 7.590%, 78.946% 8.985%, 81.102% 10.494%, 83.174% 12.115%, 85.156% 13.846%, 87.039% 15.684%, 88.815% 17.625%, 90.477% 19.664%, 92.017% 21.797%, 93.429% 24.017%, 94.707% 26.318%, 95.844% 28.690%, 96.838% 31.126%, 97.686% 33.617%;
    --shape--blob-2: 85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%;
    --shape--blob-3: 78.621% 12.736%, 80.746% 14.354%, 82.710% 16.163%, 84.520% 18.127%, 86.187% 20.215%, 87.721% 22.401%, 89.134% 24.668%, 90.437% 27.000%, 91.639% 29.386%, 92.748% 31.816%, 93.770% 34.284%, 94.714% 36.783%, 95.583% 39.309%, 96.382% 41.858%, 97.112% 44.428%, 97.770% 47.017%, 98.353% 49.624%, 98.858% 52.248%, 99.279% 54.886%, 99.611% 57.536%, 99.847% 60.197%, 99.977% 62.865%, 99.991% 65.537%, 99.879% 68.205%, 99.626% 70.865%, 99.217% 73.504%, 98.635% 76.111%, 97.863% 78.668%, 96.879% 81.151%, 95.683% 83.538%, 94.291% 85.818%, 92.717% 87.976%, 90.974% 89.999%, 89.075% 91.878%, 87.033% 93.599%, 84.860% 95.151%, 82.567% 96.520%, 80.167% 97.692%, 77.673% 98.647%, 75.100% 99.364%, 72.469% 99.819%, 69.805% 99.997%, 67.136% 99.893%, 64.491% 99.529%, 61.884% 98.946%, 59.324% 98.186%, 56.807% 97.290%, 54.329% 96.293%, 51.880% 95.225%, 49.451% 94.114%, 47.030% 92.984%, 44.607% 91.858%, 42.173% 90.757%, 39.719% 89.701%, 37.245% 88.695%, 34.756% 87.723%, 32.263% 86.763%, 29.775% 85.790%, 27.301% 84.782%, 24.852% 83.715%, 22.441% 82.564%, 20.085% 81.306%, 17.802% 79.919%, 15.615% 78.386%, 13.549% 76.694%, 11.627% 74.839%, 9.875% 72.824%, 8.296% 70.669%, 6.878% 68.406%, 5.612% 66.054%, 4.489% 63.630%, 3.502% 61.148%, 2.645% 58.618%, 1.914% 56.049%, 1.304% 53.448%, 0.812% 50.823%, 0.437% 48.178%, 0.177% 45.519%, 0.033% 42.852%, 0.004% 40.181%, 0.091% 37.511%, 0.299% 34.847%, 0.634% 32.197%, 1.088% 29.565%, 1.657% 26.955%, 2.344% 24.374%, 3.150% 21.827%, 4.078% 19.322%, 5.133% 16.868%, 6.321% 14.475%, 7.651% 12.159%, 9.134% 9.937%, 10.780% 7.835%, 12.604% 5.883%, 14.615% 4.127%, 16.820% 2.622%, 19.214% 1.442%, 21.758% 0.633%, 24.387% 0.168%, 27.052% 0.002%, 29.721% 0.082%, 32.378% 0.357%, 35.016% 0.781%, 37.632% 1.318%, 40.231% 1.936%, 42.817% 2.607%, 45.396% 3.304%, 47.975% 4.002%, 50.561% 4.673%, 53.163% 5.278%, 55.778% 5.822%, 58.401% 6.329%, 61.027% 6.821%, 63.650% 7.326%, 66.264% 7.878%, 68.858% 8.515%, 71.418% 9.281%, 73.919% 10.217%, 76.332% 11.362%, 78.621% 12.736%;
    --shape--blob-4: 80.628% 3.397%, 82.907% 4.713%, 85.051% 6.239%, 87.055% 7.945%, 88.916% 9.806%, 90.636% 11.799%, 92.213% 13.907%, 93.650% 16.112%, 94.946% 18.403%, 96.102% 20.768%, 97.115% 23.198%, 97.983% 25.683%, 98.702% 28.215%, 99.256% 30.788%, 99.652% 33.390%, 99.898% 36.011%, 99.998% 38.642%, 99.953% 41.274%, 99.765% 43.899%, 99.436% 46.511%, 98.966% 49.101%, 98.355% 51.662%, 97.602% 54.184%, 96.703% 56.658%, 95.658% 59.074%, 94.459% 61.417%, 93.104% 63.674%, 91.610% 65.841%, 89.994% 67.919%, 88.274% 69.912%, 86.469% 71.828%, 84.595% 73.677%, 82.668% 75.471%, 80.701% 77.221%, 78.709% 78.941%, 76.701% 80.644%, 74.690% 82.343%, 72.683% 84.048%, 70.680% 85.756%, 68.669% 87.455%, 66.637% 89.129%, 64.575% 90.765%, 62.468% 92.344%, 60.307% 93.847%, 58.080% 95.251%, 55.778% 96.528%, 53.396% 97.648%, 50.934% 98.576%, 48.398% 99.281%, 45.809% 99.751%, 43.186% 99.976%, 40.555% 99.967%, 37.933% 99.738%, 35.337% 99.303%, 32.781% 98.675%, 30.276% 97.865%, 27.834% 96.884%, 25.462% 95.741%, 23.171% 94.446%, 20.969% 93.004%, 18.866% 91.420%, 16.874% 89.700%, 14.991% 87.861%, 13.220% 85.913%, 11.560% 83.870%, 10.011% 81.742%, 8.574% 79.537%, 7.246% 77.263%, 6.029% 74.929%, 4.921% 72.541%, 3.923% 70.106%, 3.034% 67.628%, 2.256% 65.113%, 1.587% 62.566%, 1.033% 59.993%, 0.595% 57.397%, 0.275% 54.784%, 0.076% 52.159%, 0.001% 49.528%, 0.052% 46.896%, 0.236% 44.270%, 0.556% 41.657%, 1.019% 39.066%, 1.631% 36.506%, 2.398% 33.988%, 3.328% 31.525%, 4.412% 29.127%, 5.654% 26.806%, 7.044% 24.570%, 8.571% 22.426%, 10.224% 20.378%, 11.993% 18.429%, 13.868% 16.581%, 15.840% 14.837%, 17.900% 13.198%, 20.041% 11.666%, 22.255% 10.243%, 24.540% 8.937%, 26.891% 7.752%, 29.296% 6.680%, 31.746% 5.718%, 34.235% 4.860%, 36.755% 4.099%, 39.300% 3.427%, 41.865% 2.833%, 44.444% 2.306%, 47.035% 1.836%, 49.633% 1.412%, 52.237% 1.025%, 54.847% 0.677%, 57.463% 0.383%, 60.086% 0.162%, 62.715% 0.029%, 65.348% 0.006%, 67.978% 0.112%, 70.597% 0.372%, 73.193% 0.808%, 75.747% 1.446%, 78.234% 2.304%, 80.628% 3.397%;
    --shape--blob-5: 80.452% 2.197%, 82.761% 3.507%, 84.885% 5.101%, 86.818% 6.922%, 88.568% 8.920%, 90.147% 11.056%, 91.569% 13.300%, 92.848% 15.628%, 93.997% 18.023%, 95.026% 20.472%, 95.944% 22.966%, 96.759% 25.494%, 97.476% 28.053%, 98.100% 30.635%, 98.634% 33.238%, 99.082% 35.856%, 99.444% 38.489%, 99.714% 41.132%, 99.893% 43.782%, 99.986% 46.438%, 99.992% 49.094%, 99.909% 51.750%, 99.736% 54.401%, 99.472% 57.045%, 99.113% 59.677%, 98.656% 62.294%, 98.098% 64.892%, 97.435% 67.465%, 96.663% 70.007%, 95.776% 72.511%, 94.769% 74.969%, 93.636% 77.373%, 92.372% 79.709%, 90.970% 81.966%, 89.423% 84.125%, 87.728% 86.170%, 85.898% 88.095%, 83.943% 89.894%, 81.873% 91.560%, 79.701% 93.088%, 77.435% 94.475%, 75.087% 95.718%, 72.666% 96.811%, 70.182% 97.753%, 67.645% 98.540%, 65.063% 99.165%, 62.446% 99.622%, 59.804% 99.904%, 57.150% 100.000%, 54.495% 99.900%, 51.855% 99.607%, 49.242% 99.128%, 46.668% 98.471%, 44.142% 97.651%, 41.669% 96.680%, 39.254% 95.572%, 36.900% 94.342%, 34.605% 93.002%, 32.370% 91.566%, 30.193% 90.044%, 28.067% 88.450%, 25.999% 86.782%, 23.993% 85.040%, 22.054% 83.224%, 20.182% 81.338%, 18.380% 79.387%, 16.644% 77.375%, 14.972% 75.310%, 13.360% 73.198%, 11.802% 71.046%, 10.288% 68.863%, 8.816% 66.651%, 7.404% 64.400%, 6.063% 62.107%, 4.809% 59.765%, 3.656% 57.371%, 2.624% 54.923%, 1.730% 52.421%, 0.998% 49.868%, 0.451% 47.268%, 0.112% 44.634%, 0.000% 41.980%, 0.117% 39.327%, 0.446% 36.691%, 0.976% 34.088%, 1.696% 31.531%, 2.600% 29.033%, 3.682% 26.607%, 4.941% 24.268%, 6.375% 22.032%, 7.986% 19.921%, 9.775% 17.957%, 11.743% 16.173%, 13.876% 14.591%, 16.156% 13.229%, 18.548% 12.073%, 21.017% 11.094%, 23.538% 10.255%, 26.091% 9.521%, 28.664% 8.858%, 31.248% 8.240%, 33.837% 7.642%, 36.426% 7.045%, 39.011% 6.431%, 41.589% 5.787%, 44.157% 5.109%, 46.720% 4.407%, 49.281% 3.701%, 51.846% 3.006%, 54.418% 2.339%, 57.001% 1.717%, 59.598% 1.157%, 62.212% 0.680%, 64.842% 0.309%, 67.488% 0.072%, 70.144% 0.002%, 72.797% 0.137%, 75.424% 0.521%, 77.992% 1.197%, 80.452% 2.197%;
    --shape--blob-6: 71.914% 1.829%, 74.287% 2.884%, 76.559% 4.144%, 78.723% 5.581%, 80.777% 7.171%, 82.721% 8.894%, 84.557% 10.733%, 86.284% 12.673%, 87.906% 14.703%, 89.423% 16.812%, 90.838% 18.991%, 92.151% 21.233%, 93.364% 23.531%, 94.477% 25.878%, 95.492% 28.270%, 96.406% 30.702%, 97.222% 33.169%, 97.938% 35.666%, 98.555% 38.190%, 99.069% 40.737%, 99.476% 43.303%, 99.771% 45.884%, 99.948% 48.476%, 99.999% 51.073%, 99.914% 53.670%, 99.680% 56.257%, 99.287% 58.825%, 98.717% 61.360%, 97.957% 63.844%, 96.984% 66.252%, 95.807% 68.567%, 94.448% 70.781%, 92.930% 72.889%, 91.273% 74.890%, 89.499% 76.788%, 87.625% 78.587%, 85.668% 80.296%, 83.642% 81.923%, 81.560% 83.477%, 79.431% 84.967%, 77.266% 86.402%, 75.071% 87.793%, 72.854% 89.148%, 70.624% 90.481%, 68.375% 91.783%, 66.103% 93.044%, 63.803% 94.253%, 61.470% 95.396%, 59.100% 96.459%, 56.688% 97.425%, 54.232% 98.272%, 51.732% 98.978%, 49.190% 99.518%, 46.616% 99.866%, 44.022% 99.999%, 41.427% 99.904%, 38.848% 99.589%, 36.304% 99.067%, 33.806% 98.353%, 31.365% 97.465%, 28.988% 96.417%, 26.680% 95.223%, 24.446% 93.897%, 22.289% 92.450%, 20.209% 90.892%, 18.210% 89.233%, 16.286% 87.487%, 14.442% 85.656%, 12.685% 83.743%, 11.018% 81.750%, 9.446% 79.682%, 7.974% 77.541%, 6.608% 75.331%, 5.354% 73.056%, 4.218% 70.719%, 3.208% 68.325%, 2.331% 65.880%, 1.594% 63.389%, 0.996% 60.861%, 0.535% 58.304%, 0.216% 55.726%, 0.039% 53.134%, 0.005% 50.536%, 0.119% 47.941%, 0.385% 45.356%, 0.814% 42.794%, 1.416% 40.267%, 2.207% 37.793%, 3.204% 35.394%, 4.427% 33.103%, 5.887% 30.956%, 7.572% 28.979%, 9.454% 27.190%, 11.490% 25.576%, 13.637% 24.114%, 15.862% 22.773%, 18.137% 21.517%, 20.438% 20.310%, 22.744% 19.113%, 25.034% 17.885%, 27.285% 16.589%, 29.485% 15.207%, 31.628% 13.738%, 33.730% 12.210%, 35.812% 10.656%, 37.898% 9.106%, 40.011% 7.595%, 42.174% 6.156%, 44.403% 4.820%, 46.707% 3.621%, 49.090% 2.587%, 51.535% 1.709%, 54.034% 0.998%, 56.576% 0.466%, 59.152% 0.129%, 61.746% 0.001%, 64.342% 0.097%, 66.918% 0.430%, 69.450% 1.007%, 71.914% 1.829%;
}

/* --- /theme/newsletter-section.css --- */
.newsletter__wrapper {
  padding-right: calc(4rem / var(--font-body-scale));
  padding-left: calc(4rem / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .newsletter__wrapper {
    padding-right: 9rem;
    padding-left: 9rem;
  }
}

.newsletter__wrapper > * {
  margin-top: 0;
  margin-bottom: 0;
}

.newsletter__wrapper > * + * {
  margin-top: 2rem;
}

.newsletter__wrapper > * + .newsletter-form {
  margin-top: 3rem;
}

.newsletter__subheading {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}

.newsletter__wrapper .newsletter-form__field-wrapper {
  max-width: 36rem;
}

.newsletter-form__field-wrapper .newsletter-form__message {
  margin-top: 1.5rem;
}

.newsletter__button {
  margin-top: 3rem;
  width: fit-content;
}

@media screen and (min-width: 750px) {
  .newsletter__button {
    flex-shrink: 0;
    margin: 0 0 0 1rem;
  }
}

/* --- /theme/quantity-popover.css --- */
quantity-popover {
  position: relative;
  display: block;
}

quantity-popover volume-pricing li:nth-child(odd) {
  background: rgba(var(--color-foreground), 0.03);
}

quantity-popover volume-pricing li {
  font-size: 1.2rem;
  letter-spacing: 0.06rem;
  padding: 0.6rem 0.8rem;
  display: flex;
  justify-content: space-between;
}

.quantity-popover__info.global-settings-popup {
  width: 100%;
  z-index: 3;
  position: absolute;
  background-color: rgb(var(--color-background));
  max-width: 36rem;
}

.quantity-popover__info .button-close,
.variant-remove-total quick-order-list-remove-all-button .button,
.quick-order-list-total__confirmation quick-order-list-remove-all-button .button,
quantity-popover .quick-order-list-remove-button .button {
  --shadow-opacity: 0;
  --border-opacity: 0;
}

.quantity-popover__info-button {
  display: flex;
  align-items: center;
  margin: 0 0.4rem 0 0;
  min-width: 1.5rem;
  min-height: 1.5rem;
  --shadow-opacity: 0;
  --border-opacity: 0;
}

.quantity-popover__info-button--icon-with-label {
  text-align: left;
}

.quantity-popover__info-button--icon-with-label svg {
  flex-shrink: 0;
  width: 15px;
  height: 14px;
}

.quantity-popover__info-button--open {
  text-decoration: underline;
}

.quantity-popover__info-button span {
  padding-left: 1rem;
}

.quantity-popover__info-button--icon-only--animation svg {
  transform: scale(1.25);
}

.quantity-popover__info-button--icon-only svg {
  transition: transform var(--duration-default) ease;
  width: 15px;
  height: 14px;
}

@media screen and (max-width: 989px) {
  .quantity-popover__info.global-settings-popup {
    left: 0;
    top: 100%;
  }

  .quantity-popover__info-button {
    padding-left: 0;
  }
}

.quantity-popover__info .quantity__rules {
  margin-top: 1.2rem;
  margin-bottom: 1rem;
}

.quantity-popover__info .volume-pricing-label {
  display: block;
  margin-left: 1.2rem;
  margin-top: 1.2rem;
  font-size: 1.2rem;
}

.quantity-popover__info .button {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  top: 0.4rem;
  right: 0;
  padding: 0 1.2rem 0 0;
  display: flex;
  justify-content: flex-end;
}

.quantity-popover__info .volume-pricing-label ~ .button {
  top: -0.2rem;
}

.quantity-popover__info .button .icon {
  width: 1.5rem;
  height: 1.5rem;
}

quantity-popover volume-pricing {
  margin-top: 1.2rem;
  display: block;
}

quantity-popover .quantity__rules span:first-of-type {
  display: block;
}

.quantity-popover-container {
  display: flex;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.quantity-popover-container:not(.quantity-popover-container--hover) {
  align-items: center;
}

@media screen and (min-width: 990px) {
  .quantity-popover-container--empty {
    margin-right: 2.7rem;
  }

  .quantity-popover__info.global-settings-popup {
    width: 20rem;
  }

  .quantity-popover-container {
    width: auto;
    max-width: 20rem;
  }

  .quantity-popover__info.global-settings-popup {
    transform: translateX(-100%);
    top: 0.5rem;
  }
}

quantity-popover .quantity {
  background: rgb(var(--color-background));
}

quantity-popover .quantity__rules {
  margin-left: 0.8rem;
}

quantity-popover .quantity__rules .divider:nth-child(2)::before {
  content: none;
}

quantity-popover .quantity__button:not(:focus-visible):not(.focused),
quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
  background-color: initial;
}

/* --- /theme/quick-add.css --- */
.quick-add {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card--card .quick-add {
  margin: 0 1.3rem 1rem;
}

.quick-add-modal {
  box-sizing: border-box;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(var(--color-foreground), 0.2);
  height: 100%;
}

.quick-add-modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}

.quick-add-modal .scroll-trigger.scroll-trigger {
  animation: none;
  opacity: 1;
  transform: none;
}

.quick-add-modal .quick-order-list__container {
  padding-bottom: 1.5rem;
}

.quick-add-modal__content.quick-add-modal__content--bulk {
  width: 90%;
}

.quick-add-modal__content {
  --modal-height-offset: 3.2rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: var(--modal-height-offset) auto 0;
  width: 100%;
  background-color: rgb(var(--color-background));
  overflow: hidden;
  max-width: var(--page-width);
  width: calc(100% - 3rem);
}

@media screen and (min-width: 750px) {
  .quick-add-modal__content {
    --modal-height-offset: 10rem;
    margin-top: var(--modal-height-offset);
    width: 80%;
    max-height: calc(100% - var(--modal-height-offset) * 2);
    overflow-y: auto;
  }

  quick-add-modal .quick-add-modal__toggle {
    top: 2rem;
    right: 2rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content {
    width: 70%;
  }
}

.quick-add-modal__content img {
  max-width: 100%;
}

.quick-add-modal__content-info.quick-add-modal__content-info--bulk {
  padding-bottom: 0;
}

.quick-add-modal__content-info--bulk h3 {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.quick-add-modal__content-info--bulk .price,
.quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
  display: inline-block;
}

.section-bulk-quick-order-list-padding {
  padding-top: 2.7rem;
  padding-bottom: 2.7rem;
}

@media screen and (min-width: 750px) {
  .section-bulk-quick-order-list-padding {
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  .quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
    padding-left: 1.6rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    overflow-y: initial;
  }

  .quick-add-modal__content-info--bulk .quick-order-list__table th {
    padding-top: 2.5rem;
  }

  .quick-add-modal__content-info--bulk thead {
    position: sticky;
    z-index: 3;
    top: 0;
    background-color: rgb(var(--color-background));
  }
}

.quick-add-modal__content-info--bulk .quick-add__product-media,
.quick-add-modal__content-info--bulk .quick-add__product-container,
.quick-add-modal__content-info--bulk .quick-add__info {
  width: 4.8rem;
  height: 7rem;
}

.quick-add-modal__content-info--bulk-details {
  padding-left: 1rem;
}

.quick-add-modal__content-info--bulk-details > a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info--bulk .quick-add__product-media,
  .quick-add-modal__content-info--bulk .quick-add__product-container,
  .quick-add-modal__content-info--bulk .quick-add__info {
    width: 17rem;
    height: 22rem;
  }

  .quick-add-modal__content-info--bulk-details,
  .quick-add-modal__content-info--bulk quick-order-list {
    padding: 0 2.5rem;
  }
}

.quick-add__product-media {
  margin-bottom: 1rem;
}

.quick-add-modal__content-info--bulk .quick-add__product-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-add-modal__content-info--bulk .quick-add__info {
  display: flex;
}

.quick-add-modal__content-info--bulk .quick-add__content-info__media {
  width: auto;
}

@media screen and (max-width: 989px) {
  .quick-add-modal__content-info--bulk .quick-add__content-info__media {
    display: flex;
    margin: 0;
  }

  .quick-add-modal__content-info--bulk quick-order-list {
    padding-left: 0;
    padding-right: 0;
  }

  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    --modal-padding: 1.5rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info--bulk .quick-add__info {
    flex-direction: column;
    position: sticky;
    top: 0;
    margin-top: -2.5rem;
    padding-top: 2.5rem;
  }
}

@media screen and (max-width: 989px) {
  .quick-add-modal__content-info--bulk {
    flex-direction: column;
  }
}

.quick-add-modal__content-info {
  --modal-padding: 2.5rem;
  padding-right: 4.4rem;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--modal-padding);
  height: 100%;
}

.quick-add-modal__content-info > * {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.quick-add-modal__content-info > product-info {
  padding: 0;
}

@media screen and (max-width: 749px) {
  quick-add-modal .slider .product__media-item.grid__item {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .quick-add-modal__content {
    bottom: var(--modal-height-offset);
  }

  .quick-add-modal__content-info > * {
    max-height: 100%;
  }

  quick-add-modal .product--mobile-columns .product__media-item {
    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
  }
}

.quick-add-modal__toggle {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1.2rem;
  z-index: 5;
  width: 4rem;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
}

.quick-add-modal__toggle:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.quick-add-modal__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

quick-add-modal .product:not(.featured-product) .product__view-details {
  display: block;
}

.quick-add-modal__content--bulk .product__view-details .icon {
  margin-left: 1.2rem;
}

quick-add-modal .quick-add-hidden,
quick-add-modal .product__modal-opener:not(.product__modal-opener--image),
quick-add-modal .product__media-item:not(:first-child) {
  display: none !important;
}

quick-add-modal .slider.slider--mobile {
  overflow: visible;
}

quick-add-modal .product__column-sticky .product__media-list {
  margin-bottom: 0;
}

quick-add-modal .product__media-list .deferred-media {
  display: block;
  width: 100%;
}

quick-add-modal .product__column-sticky {
  top: 0;
  position: relative;
}

@media screen and (min-width: 750px) {
  quick-add-modal .product:not(.product--no-media) .product__media-wrapper {
    max-width: 45%;
    width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  quick-add-modal .product:not(.product--no-media) .product__info-wrapper {
    padding-top: 2rem;
    padding-left: 4rem;
    max-width: 54%;
    width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  quick-add-modal .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
    max-width: 100%;
    width: 100%;
  }

  quick-add-modal .thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: none;
  }
}

quick-add-modal .page-width {
  padding: 0;
}

quick-add-modal .product__title > h1 {
  display: none;
}

quick-add-modal .product__title > a {
  display: block;
  text-decoration: none;
}

quick-add-modal .product__title > a:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.3rem;
}

quick-add-modal .product-form__buttons {
  max-width: initial;
}

.quick-add__submit {
  padding: 0.8rem;
  min-width: 100%;
  box-sizing: border-box;
}

quick-add-modal .product-media-container.constrain-height {
  --viewport-offset: calc((var(--modal-height-offset) + var(--modal-padding) + var(--popup-border-width)) * 2);
}

@media screen and (min-width: 750px) {
  quick-add-modal .product-media-container.constrain-height {
    --constrained-min-height: 400px;
  }
}

quick-add-bulk {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card__content quick-add-bulk .quantity {
  width: 100%;
}

quick-add-bulk .progress-bar-container {
  position: absolute;
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: var(--inputs-radius-outset);
  border: var(--inputs-border-width) solid transparent;
  z-index: -1;
}

quick-add-bulk quantity-input {
  justify-content: space-between;
}

quick-add-bulk .quantity__input {
  max-width: calc(6.5rem / var(--font-body-scale));
  flex-grow: 0;
}

.quantity__input-disabled {
  pointer-events: none;
}

/* --- /theme/section-contact-form.css --- */
#ContactForm{
 background: linear-gradient(to bottom, #D623ED, #8400D6);
    border-radius: 32px;
  box-shadow: 0 18px 12px #0000004d;
}
.title{
  color:#fff;
  font-weight: 700;
  text-align: center;
}
.background-image{
    background-color: #2A005E !important;
}
.contact img {
  max-width: 100%;
}

.contact .form__message {

}

.contact .icon-success {
  margin-top: 0.2rem;
}

.contact .field {
  margin-bottom: 1.5rem;
}
#ContactForm {
  padding: 30px 50px;
}

#ContactForm label{
  font-weight: 500;
}
.contact__button button{
    color: #2a005e;
    background-color: #4d008c;
    width: 35%;
    border-radius: 15px;
    line-height: 1.5;
    font-family: Chillax, sans-serif;
    font-weight: 700;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 24px;
    text-decoration: none;
    background: linear-gradient(to bottom, #fbffb4, #f2ff00, #f2ff00, #afb900);
    box-shadow: 0 9px 4px #0003;
    transition: all .3s;
    margin: 0 auto;
}
.title {
  margin: 0;
}
.contact__button button::after,.contact__button button::before{
  display: none;
}
.contact__button button:hover,.contact__button button:active{
    background: linear-gradient(to bottom, #fff7a6, #ff0, #d5cc00, #999000);
    box-shadow: 0 12px 6px #0000004d;
}

@media screen and (min-width: 750px) {
  .contact .field {
    margin-bottom: 2rem;
  }
}

.contact__button {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .contact__button {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 860px) {
  .title{
    text-align: center;
  }
  .contact__button button{
  width: 100%;
}
  #ContactForm {
  padding: 20px;
    border:0.5px solid #000;
    margin: 0 26px;
}
}

@media screen and (min-width: 750px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
  }
}

/* --- /theme/section-email-signup-banner.css --- */
.email-signup-banner .newsletter-form,
.email-signup-banner .newsletter-form__field-wrapper {
  display: inline-block;
}

@media only screen and (min-width: 750px) {
  .email-signup-banner:not(.banner--desktop-transparent) .email-signup-banner__box {
    width: 100%;
  }
}

.email-signup-banner__box .email-signup-banner__heading {
  margin-bottom: 0;
}

.email-signup-banner__box > * + .newsletter__subheading {
  margin-top: 2rem;
}

.email-signup-banner__box .newsletter__subheading p {
  margin: 0;
}

.email-signup-banner-background {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 749px) {
  .email-signup-banner:not(.banner--mobile-bottom) .banner__box:not(.email-signup-banner__box--no-image) {
    background-color: transparent;
    --color-foreground: 255, 255, 255;
    --color-button: 255, 255, 255;
    --color-button-text: 0, 0, 0;
  }
}

@media only screen and (min-width: 750px) {
  .banner--desktop-transparent .email-signup-banner__box--no-image * {
    color: rgb(var(--color-foreground));
  }

  .banner--desktop-transparent .email-signup-banner__box .field__input {
    background-color: transparent;
  }

  .banner--desktop-transparent .email-signup-banner__box--no-image .field__input {
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  }

  .banner--desktop-transparent .email-signup-banner__box--no-image .field__input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
  }

  .banner--desktop-transparent .email-signup-banner__box--no-image .field__button:focus-visible {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  }
}

@media only screen and (min-width: 750px) {
  .email-signup-banner-background-mobile {
    display: none;
  }
}

@media only screen and (max-width: 749px) {
  .email-signup-banner-background:not(.email-signup-banner-background-mobile) {
    display: none;
  }
}

.email-signup-banner .banner__media {
  overflow: hidden;
}

@media screen and (max-width: 749px) {
  .banner--mobile-content-align-left .newsletter-form__message {
    justify-content: flex-start;
  }

  .banner--mobile-content-align-right .newsletter-form__message {
    justify-content: right;
  }
}

@media screen and (min-width: 750px) {
  .banner--content-align-center .newsletter-form__message {
    justify-content: center;
  }

  .banner--content-align-right .newsletter-form__message {
    justify-content: right;
  }
}

/* --- /theme/section-image-banner.css --- */
.banner {
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: auto;
  isolation: isolate;
}

.banner__box {
  text-align: center;
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.banner__box.gradient {
  transform: perspective(0);
}

@media only screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__box {
    text-align: right;
  }

  .banner--content-align-mobile-left .banner__box {
    text-align: left;
  }
}

@media only screen and (min-width: 750px) {
  .banner--content-align-right .banner__box {
    text-align: right;
  }

  .banner--content-align-left .banner__box {
    text-align: left;
  }

  .banner--content-align-left.banner--desktop-transparent .banner__box,
  .banner--content-align-right.banner--desktop-transparent .banner__box,
  .banner--medium.banner--desktop-transparent .banner__box {
    max-width: 68rem;
  }
}

.banner__media.animate--zoom-in {
  clip-path: inset(0px);
}

.banner__media.animate--zoom-in > img:not(.zoom):not(.deferred-media__poster-button),
.banner__media.animate--zoom-in > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

@media screen and (max-width: 749px) {
  .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 28rem;
  }

  .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 34rem;
  }

  .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 39rem;
  }

  .banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 28rem;
  }

  .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 34rem;
  }

  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 39rem;
  }
}

@media screen and (min-width: 750px) {
  .banner {
    flex-direction: row;
  }

  .banner--small:not(.banner--adapt) {
    min-height: 42rem;
  }

  .banner--medium:not(.banner--adapt) {
    min-height: 56rem;
  }

  .banner--large:not(.banner--adapt) {
    min-height: 72rem;
  }

  .banner__content.banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content.banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content.banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content.banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content.banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content.banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content.banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content.banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content.banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .banner:not(.banner--stacked) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .banner--stacked {
    height: auto;
  }

  .banner--stacked .banner__media {
    flex-direction: column;
  }
}

.banner__media {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.banner__media-half {
  width: 50%;
}

.banner__media-half + .banner__media-half {
  right: 0;
  left: auto;
}

.banner__media-half.animate--fixed:first-child > img,
.banner__media-half.animate--zoom-in:first-child > img {
  width: 50%;
}

.banner__media-half.animate--fixed:nth-child(2) > img,
.banner__media-half.animate--zoom-in:nth-child(2) > img {
  left: 50%;
  width: 50%;
}

@media screen and (max-width: 749px) {
  .banner--stacked .animate--fixed:first-child > img,
  .banner--stacked .animate--zoom-in:first-child > img {
    width: 100%;
  }

  .banner--stacked .banner__media-half.animate--fixed:nth-child(2) > img,
  .banner--stacked .banner__media-half.animate--zoom-in:nth-child(2) > img {
    left: 0;
    width: 100%;
  }

  .banner--stacked .banner__media-half {
    width: 100%;
  }

  .banner--stacked .banner__media-half + .banner__media-half {
    order: 1;
  }
}

@media screen and (min-width: 750px) {
  .banner__media {
    height: 100%;
  }
}

.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
  height: auto;
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom .banner__media,
  .banner--stacked:not(.banner--mobile-bottom) .banner__media {
    position: relative;
  }

  .banner--stacked.banner--adapt .banner__content {
    height: auto;
  }

  .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: transparent;
  }

  .banner:not(.banner--mobile-bottom) .banner__box {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner:not(.banner--mobile-bottom) .button--secondary {
    --alpha-button-background: 0;
  }

  .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    position: absolute;
    height: auto;
  }

  .banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
    max-height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .banner--stacked:not(.banner--adapt) .banner__media {
    position: relative;
  }

  .banner::before {
    display: none !important;
  }

  .banner--stacked .banner__media-image-half {
    width: 100%;
  }
}

.banner__content {
  padding: 0;
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@media screen and (min-width: 750px) {
  .banner__content {
    padding: 5rem;
  }

  .banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 2;
  }

  .banner:not(.banner--mobile-bottom) .field__input,
  .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
    background: transparent;
  }
}

.banner__box {
  padding: 4rem 1.5rem;
  position: relative;
  height: fit-content;
  align-items: center;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  z-index: 1;
}

.banner--mobile-bottom .banner__box {
  padding: 4rem 3.5rem;
}

@media screen and (min-width: 750px) {
  .banner__box {
    padding: 4rem 3.5rem;
  }

  .banner--desktop-transparent .banner__box {
    padding: 4rem 0;
    background: transparent;
    max-width: 89rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner--desktop-transparent .button--secondary {
    --alpha-button-background: 0;
  }

  .banner--desktop-transparent .content-container:after {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom::after,
  .banner--mobile-bottom .banner__media::after {
    display: none;
  }
}

.banner::after,
.banner__media::after {
  content: '';
  position: absolute;
  top: 0;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.banner__box > * + .banner__text {
  margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
  .banner__box > * + .banner__text {
    margin-top: 2rem;
  }
}

.banner__box > * + * {
  margin-top: 1rem;
}

.banner__box > *:first-child {
  margin-top: 0;
}

@media screen and (max-width: 749px) {
  .banner--stacked .banner__box {
    width: 100%;
  }
}

@media screen and (min-width: 750px) {
  .banner__box {
    width: auto;
    max-width: 71rem;
    min-width: 45rem;
  }
}

@media screen and (min-width: 1400px) {
  .banner__box {
    max-width: 90rem;
  }
}

.banner__heading {
  margin-bottom: 0;
}

.banner__box .banner__heading + * {
  margin-top: 1rem;
}

.banner__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 45rem;
  word-break: break-word;
}

@media screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__buttons--multiple {
    justify-content: flex-end;
  }

  .banner--content-align-mobile-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }
}

@media screen and (min-width: 750px) {
  .banner--content-align-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }

  .banner--content-align-right .banner__buttons--multiple {
    justify-content: flex-end;
  }
}

.banner__box > * + .banner__buttons {
  margin-top: 2rem;
}

@media screen and (max-width: 749px) {
  .banner:not(.slideshow) .rte a,
  .banner:not(.slideshow) .inline-richtext a:hover,
  .banner:not(.slideshow) .rte a:hover {
    color: currentColor;
  }
}
@media screen and (max-width: 860px) {
.banner__buttons {
    width: 100%;
}
  .banner__box {
    padding: 4rem 0rem;
}
}

@media screen and (min-width: 750px) {
  .banner--desktop-transparent .rte a,
  .banner--desktop-transparent .inline-richtext a:hover,
  .banner--desktop-transparent .rte a:hover {
    color: currentColor;
  }
}
@media screen and (max-width: 475px) {
  .banner__buttons{
        padding: 0 26px;
  }
}
/* --- /theme/section-main-page.css --- */
.page-title {
  margin-top: 0;
}
.page-width{
  color: #fff;
}
.main-page-title {
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .main-page-title {
    margin-bottom: 4rem;
  }
}

.page-placeholder-wrapper {
  display: flex;
  justify-content: center;
}

.page-placeholder {
  width: 52.5rem;
  height: 52.5rem;
}

/* --- /theme/section-rich-text.css --- */
.show-more-description svg path{
  fill:#fff;
}
.show-more-description svg {
  width: 18px;
  height: 20px;
}
.show-more-description:hover svg path{
  fill:#F2FF00;
}
.rich-text {
  z-index: 1;
}
.rich-text__text {
  overflow:hidden;
  transition:all 0.4s;
  color: #fff;
    font-weight: 400;
    font-size: 16px;
}

.rich-text__wrapper {
  display: flex;
  justify-content: center;
}

.rich-text:not(.rich-text--full-width) .rich-text__wrapper {
  margin: auto;
  width: calc(100% - 8rem / var(--font-body-scale));
}
.rich-text__heading {
  font-size:32px;
  color:#fff !important;
  text-transform: uppercase;
}
.rich-text__blocks {
  width: 100%;
  font-size: 18px;
}
.show-more-description {
    color: #fff;
    display: inline-flex;
    gap: 15px;
    font-size: 20px;
    align-items: center;
  
}
.show-more-description:hover {
    color: #F2FF00;
    display: inline-flex;
    gap: 15px;
    align-items: center;
}

@media screen and (min-width: 750px) {
  .rich-text__wrapper {
    width: 100%;
  }
  .rich-text__heading {
}
  .rich-text__blocks {
  width: 100%;
  font-size: 15px;
}

  .rich-text__wrapper--left {
    justify-content: flex-start;
  }

  .rich-text__wrapper--right {
    justify-content: flex-end;
  }

}
@media screen and (max-width: 750px) {
.rich-text__heading {
  font-size:20px
}
.rich-text__text {
  font-size:16px
}
.show-more-description{
  text-transform: uppercase;
  display:inline-flex;
  gap:15px;
  font-size:15px; 
  align-items: center;
  letter-spacing: 2px;
}
}


.rich-text__blocks * {
  overflow-wrap: break-word;
}

.rich-text__blocks > * {
  margin-top: 0;
  margin-bottom: 0;
}

.rich-text__blocks > * + * {
  margin-top: 2rem;
}

.rich-text__blocks > * + a {
  margin-top: 3rem;
}

.rich-text__buttons {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: 45rem;
  word-break: break-word;
}

.rich-text__buttons--multiple > * {
  flex-grow: 1;
  min-width: 22rem;
}

.rich-text__buttons + .rich-text__buttons {
  margin-top: 1rem;
}

.rich-text__blocks.left .rich-text__buttons {
  justify-content: flex-start;
}

.rich-text__blocks.right .rich-text__buttons {
  justify-content: flex-end;
}
.description-wrapper {
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.description-wrapper.collapsed {
  max-height: 140px; 
}

.description-wrapper.expanded {
  max-height: 9999px;
}


  .rich-text__text.truncated span,
  .rich-text__text.truncated p {
    display: inline;
  }
/* --- /theme/template-collection.css --- */
.collection__title h2{
  color:#fff;
}

.collection__description p{
  color:#fff;
}

.background-image{
    background-color: #2A005E !important;
}
@media screen and (max-width: 749px) {
  .collection .grid__item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/*
@media screen and (max-width: 989px) {
  .collection .slider.slider--tablet {
    margin-bottom: 1.5rem;
  }
}
*/
.collection .loading-overlay {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

@media screen and (max-width: 749px) {
  .collection .loading-overlay {
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    left: 0;
  }
}
@media screen and (min-width: 860px) {
    .products_button:link, .products_button:visited {
        border: none;
        background: linear-gradient(to bottom, #fbffb4, #f2ff00, #f2ff00, #afb900);
        box-shadow: 0 9px 4px #0003;
        font-family: Montserrat, sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 18px;
        color: #2a005e;
        align-items: center;
        border-radius: 15px;
        padding: 10px 50px;
        line-height: 1.5;
        text-decoration: none;
        box-sizing: border-box;
        justify-content: center;
        text-transform: uppercase;
        cursor: pointer;
        text-align: center;
        transition: .3s ease;
        margin-bottom: 10px;
    }
      .products_button:hover, .products_button:active {
        background: linear-gradient(to bottom, #fff7a6, #ff0, #d5cc00, #999000);
        box-shadow: 0 12px 6px #0000004d;
    }

    .collection__title--desktop-slider .title,.collection__title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
  }
}
@media(max-width:860px){
  .collection__title h2{
}
  .collection__description p{
  color:#4D008C;
}
  .desktop-button{
  display: none !important;
}
}
.collection .loading-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 0 1.5rem;
  opacity: 0.7;
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.collection.loading .loading-overlay {
  display: block;
}

.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}

@media screen and (max-width: 989px) {
  .collection .slider--tablet.product-grid {
    scroll-padding-left: 1.5rem;
  }
}

.collection__description > * {
  margin: 0;
}


  .collection__title h2{
    color:#fff;
  }
  .collection__title--desktop-slider .title,.collection__title {
    margin-bottom: 0;
    text-transform: uppercase;
    line-height: 1;
    font-size: 38px;
    text-align: center;
    color: #fff;
    font-family: 'Impact', sans-serif;
    font-weight: 700;
  }
  .collection__title--desktop-slider p .title,.collection__title p{
    font-size: 25px;
  }
@media screen and (min-width: 990px) {
  .collection__title--desktop-slider p .title,.collection__title p{
    font-size: 20px;
  }

  .collection slider-component:not(.page-width-desktop) {
    padding: 0;
  }

  .collection--full-width slider-component:not(.slider-component-desktop) {
    padding: 0 1.5rem;
    max-width: none;
  }
}

.collection__view-all a:not(.link) {
  margin-top: 1rem;
}
@media screen and (max-width:860px){
  .collection__title--desktop-slider .title,.collection__title {
    margin-bottom: 15px;
    text-transform: uppercase;
    line-height: 1;
    font-size: 24px;
    text-align: center;
    padding: 0 0 5px 0;
    margin: 0;
  }
  .collection__title--desktop-slider p .title,.collection__title p{
    font-size: 16px;
  }
  .collection__title h2 {
    font-size: 24px;
}
}

/* --- /theme/updated-product-card.css --- */
/* ============================================================
   Product card — redesign from Figma "DOZO" V4 (2026-06-30)
   Base = "1 card" (carousel). ".product-grid" scope = "2 cards" (collection grid).
   ============================================================ */

/* ---- Chillax font (Fontshare, free). Files sit in /assets next to this CSS ---- */
@font-face{
  font-family:'Chillax';
  src:url('/theme/Chillax-Medium.woff2') format('woff2'),
      url('/theme/Chillax-Medium.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Chillax';
  src:url('/theme/Chillax-Semibold.woff2') format('woff2'),
      url('/theme/Chillax-Semibold.woff') format('woff');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ---- Card ---- */
.updated-product-card{
  --upc-radius:22px;
  --upc-badge-bg:rgba(42,0,94,.6);
  --upc-promo-bg:rgba(242,255,0,.85);
  --upc-inset:14px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  background:#570099;
  border-radius:var(--upc-radius);
  overflow:hidden;
  box-sizing:border-box;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
  font-family:'Chillax','Outfit',sans-serif;
}
.updated-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 26px rgba(0,0,0,.35);
}

/* ---- Image + gradient ---- */
.upc__image{
  position:relative;
  width:100%;
  aspect-ratio:189/230;      /* portrait — trimmed so the pack nearly touches the top/bottom badges */
  background:linear-gradient(180deg,#DD4BFF 0%,#0069E3 100%);
  border-radius:var(--upc-radius);
  overflow:hidden;
}
.upc__pack{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:0;                 /* pack fills the tile edge-to-edge (top/left/right = 0) */
  box-sizing:border-box;
}
.upc__pack--full{ padding:0; object-fit:cover; }   /* fallback featured image fills tile */

/* ---- Badges ---- */
.upc__badge{
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  padding:6px 10px;
  border-radius:10px;
  background:var(--upc-badge-bg);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  color:#fff;
  line-height:1;
  z-index:2;
}
.upc__badge--tl{ top:var(--upc-inset); left:var(--upc-inset); }
.upc__badge--tr{ top:var(--upc-inset); right:var(--upc-inset); }
.upc__badge--bl{ bottom:var(--upc-inset); left:var(--upc-inset); }
.upc__badge--br{
  bottom:var(--upc-inset); right:var(--upc-inset);
  flex-direction:row; align-items:center; gap:6px; padding:5px 10px;
}
.upc__badge-lg{ font-size:18px; font-weight:600; line-height:1.05; }
.upc__badge-sm{ font-size:15px; font-weight:500; line-height:1.05; }
.upc__badge--promo{
  background:var(--upc-promo-bg);
  color:#2A005E;
  font-weight:600;
  font-size:16px;
  text-align:center;
  line-height:1.05;
  max-width:78px;
  align-items:center;
}
.upc__badge-ico{ display:inline-flex; width:14px; height:14px; flex:0 0 auto; }
.upc__badge-ico svg{ width:100%; height:100%; display:block; }

/* "N tabs / N cubes" (bottom-right): always ONE line (2026-07-03) — long values like
   "20 cubes" were wrapping to two lines; keep the badge compact instead of huge */
.upc__badge--br{ white-space:nowrap; }
.upc__badge--br .upc__badge-sm{ font-size:15px; font-weight:600; }
.upc__badge--br .upc__badge-ico{ width:15px; height:15px; }
.upc__badge--br{ min-height:46px; box-sizing:border-box; }

/* 2026-07-03: D9 Smashers gummies carry a 5-digit "10,000mg / 20,000mg" bottom-left badge
   whose big number was wide enough to collide with the bottom-right "20 cubes" badge.
   Shrink that number (only on these products) so the two bottom badges clear each other. */
.updated-product-card[href*="d9-smasher"] .upc__badge--bl{ max-width:44%; }
/* br max-width removed 2026-07-03: with white-space:nowrap it clipped "20 cubes"; smaller font fits */
.updated-product-card[href*="d9-smasher"] .upc__badge--bl .upc__badge-lg{ font-size:13px; }
#product-grid .updated-product-card[href*="d9-smasher"] .upc__badge--bl .upc__badge-lg{ font-size:11px; }
@media screen and (min-width:750px){
  .updated-product-card[href*="d9-smasher"] .upc__badge--bl .upc__badge-lg{ font-size:16px; }
}

/* ---- Info ---- */
.upc__info{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 20px 20px;
  flex:1 1 auto;
}
.upc__title{
  margin:0;
  color:#fff;
  font-weight:600;
  font-size:20px;
  line-height:1.2;
  font-family:'Chillax','Outfit',sans-serif;
  text-align:left;
}
/* all info lines start at the same left edge (grid centers text otherwise) */
.upc__info{ text-align:left; }
.upc__meta{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#fff;
  font-weight:500;
  font-size:16px;
}
.upc__rating,
.upc__flavors{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.upc__ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.upc__ico--star{ width:19px; height:19px; }
.upc__ico--flavor{ width:16px; height:16px; }
.upc__ico svg{ width:100%; height:100%; display:block; }
.upc__price{ display:flex; align-items:baseline; gap:6px; margin-top:auto; }
.upc__price-from{ color:#B8ADC7; font-weight:500; font-size:20px; }
.upc__price-val{ color:#fff; font-weight:600; font-size:20px; }

/* ============================================================
   Format "1 card" — carousel width (updated-featured-products)
   ============================================================ */
.updated-featured-products_scroll .updated-product-card{ flex:0 0 auto; width:300px; }

@media screen and (max-width:860px){
  .updated-featured-products_scroll .updated-product-card{ width:86vw; max-width:360px; }
}

/* ============================================================
   Format "2 cards" — collection grid, MOBILE/TABLET ONLY (compact, meta stacked).
   Desktop (≥990px) intentionally falls through to the base "1 card"
   layout so the 3-per-row grid matches the best-sellers carousel.
   Scope by #product-grid (unique to main-collection-product-grid),
   NOT .product-grid — carousels (featured-collection/product) also use
   ul.product-grid and must keep the "1 card" base layout.
   ============================================================ */
@media screen and (max-width:989px){
#product-grid .updated-product-card{ --upc-radius:18px; --upc-inset:8px; }
#product-grid .updated-product-card .upc__info{ padding:12px 14px 14px; gap:6px; }
#product-grid .updated-product-card .upc__title{ font-size:16px; line-height:1.15; }
#product-grid .updated-product-card .upc__meta{ flex-direction:column; align-items:flex-start; gap:6px; font-size:14px; }
/* uniform line spacing: drop the auto push on price + equal meta icon widths so rating/flavors text align */
#product-grid .updated-product-card .upc__price{ margin-top:0; }
#product-grid .updated-product-card .upc__meta .upc__ico{ width:18px; height:18px; }
#product-grid .updated-product-card .upc__price-from,
#product-grid .updated-product-card .upc__price-val{ font-size:16px; }

/* Portrait image + full-width pack (Figma 2-card: gradient 189×224, pack spans full width) */
#product-grid .updated-product-card .upc__image{ aspect-ratio:189 / 258; border-radius:18px; }
#product-grid .updated-product-card .upc__pack{ padding:0; object-position:center; }

/* compact badges so all 4 corners fit the narrow 2-col tile without overlap */
#product-grid .updated-product-card .upc__badge{ padding:4px 6px; }
#product-grid .updated-product-card .upc__badge--br{ gap:5px; padding:6px 4px; bottom:17px; min-height:0; }
#product-grid .updated-product-card .upc__badge--br .upc__badge-sm{ font-size:14px; }
#product-grid .updated-product-card .upc__badge--br .upc__badge-ico{ width:15px; height:15px; }
#product-grid .updated-product-card .upc__badge-lg{ font-size:13px; }
#product-grid .updated-product-card .upc__badge-sm{ font-size:11px; }
#product-grid .updated-product-card .upc__badge-ico{ width:12px; height:12px; }
#product-grid .updated-product-card .upc__badge--promo{ font-size:15px; max-width:80px; line-height:1.05; padding:6px 8px; }

/* enlarge the two LEFT badges (125mg tab / 500mg pack) for prominence — room checked: no overlap with right badges */
#product-grid .updated-product-card .upc__badge--tl,
#product-grid .updated-product-card .upc__badge--bl{ padding:6px 6px; }
#product-grid .updated-product-card .upc__badge--tl .upc__badge-lg,
#product-grid .updated-product-card .upc__badge--bl .upc__badge-lg{ font-size:17px; }
#product-grid .updated-product-card .upc__badge--tl .upc__badge-sm,
#product-grid .updated-product-card .upc__badge--bl .upc__badge-sm{ font-size:13px; }
}

/* ============================================================
   Widen the "featured products" carousel on tablet/mobile:
   the page-width wrapper adds large side gutters + centers at
   max-width 1200 — override so cards stretch edge-to-edge with a
   thin gutter (matching the ~4px inter-card gap). Desktop (>1024)
   keeps the centered page-width look.
   ============================================================ */
@media screen and (max-width:1024px){
  .shopify-section.section-featured-product.page-width{
    max-width:100% !important;
    width:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

/* 4-digit mg products (10ct "1,000mg jar" / 5ct "1,250mg pack") — shrink the long bottom-left number
   a touch so the bottom badges keep the same ~23px gap as the template instead of overlapping.
   Mobile/tablet compact grid only (desktop tiles are wide enough). */
@media screen and (max-width:989px){
#product-grid .updated-product-card[href*="10ct-100mg-dozo-perks"] .upc__badge--bl .upc__badge-lg,
#product-grid .updated-product-card[href*="5ct-dozo-perks-kratom"] .upc__badge--bl .upc__badge-lg{ font-size:14px; }
/* 10ct also has a wide "10 tabs" (2-digit) — trim it so the bottom gap matches the template */
#product-grid .updated-product-card[href*="10ct-100mg-dozo-perks"] .upc__badge--br .upc__badge-sm{ font-size:12px; }
}

/* ============================================================
   Desktop (≥990px): enlarge all 4 corner badges so they nearly
   touch the pack (user request 2026-07-03). Applies to the base
   "1 card" layout = collection grid AND best-sellers carousel.
   ============================================================ */
@media screen and (min-width:990px){
  .updated-product-card .upc__badge{ padding:8px 13px; border-radius:12px; }
  .updated-product-card .upc__badge-lg{ font-size:23px; }
  .updated-product-card .upc__badge-sm{ font-size:19px; }
  .updated-product-card .upc__badge--br{ gap:7px; padding:7px 13px; min-height:54px; }
  .updated-product-card .upc__badge--br .upc__badge-sm{ font-size:17px; }
  .updated-product-card .upc__badge--br .upc__badge-ico{ width:17px; height:17px; }
  .updated-product-card .upc__badge--promo{ font-size:19px; max-width:96px; }
}

/* ---- keep predictive-search rating styling (used elsewhere) ---- */
.search-rating>div{ color:#fff; }
.search-rating-icon svg path{ fill:#F2FF00; }
.search-rating-icon svg rect{ fill:#F2FF00; }

/* --- /theme/videos.css --- */
.video-section-container .title{
}
.videos_section{
  margin:0;
}
.videos_scroll {
    display: flex;
    gap: 8px;
    transition: all 0.5s;
}

.videos_scroll-container {
    overflow: hidden;
    margin-bottom: 20px;
}

.videos_section_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.progress-bar {
    width: 40%;
    height: 12px;
    border: 1px solid #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}


.video {
    padding: 20px 20px 10px 20px;
    flex-shrink: 0;
    margin: 1px;
    border-radius: 39px;
    border: 1px solid #F2FF00;
    width: 100%;
    height: 100%;
}

.video video {
    width: 100%;
     border-radius: 19px;
}

.videos_section {
      margin-bottom: 25px;
}

.videos_buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end;
}

.videos_button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius: 13px;
    width: 45px;
    height: 45px;
    transition: all 0.3s;
    border: 0.5px solid #000;
    cursor: pointer;
}

.videos_button:hover,
.videos_button:active {
    background-color: #F2FF00;
}

.videos_button:hover,
.videos_button:active {
    transition: all 0.3s;
}

.videos_button:hover path,
.videos_button:active path {
    fill: #000;
}

.videos_title {
    font-size: 36px;
    color: #000;
    text-transform: uppercase;
    margin: 0 0 15px;
}

@media screen and (max-width:1100px) {
    .videos_section {
    }
}

@media screen and (max-width:860px) {

  .video-section-container{
    padding: 0px;
  }
  .videos .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item, .grid--peek .grid__item{
width: 80% !important;
  max-width: 80%;
}
    .videos_title {
        text-align: center;
        font-size: 20px;
    }

    .videos_section {
        padding: 0 26px 0 26px;
        border: none;
    }

    .videos_buttons {
        display: none;
    }

    .videos_scroll-container {
        overflow: scroll;
    }

    .videos_scroll-container {
        scrollbar-width: none;

        -ms-overflow-style: none;
        overflow: auto;
    }

    .videos_scroll-container::-webkit-scrollbar {
        display: none;
    }

    .videos_title {
        padding: 0 40px;
    }
 
}
.updated-videos_button{
         display: flex;
    align-items: center;
    justify-content: center;
    background-color: #8400d6;
    border-radius: 16px;
    width: 45px;
    height: 45px;
    transition: all .3s;
    border: none;
    cursor: pointer;
}
.updated-videos_button path{
  fill:#fff;
}
.updated-videos_button:hover path{
  fill:#2A005E;
}

.updated-videos_button:hover,
.updated-videos_button:active {
    background-color: #f2ff00;
}
.videos-progress-bar{
  width: 40%;
    height: 12px;
    border: 1px solid #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.videos-progress-bar-fill{
    display: block !important;
    height: 100%;
    width: 0;
    background-color: #fff ;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
}

@media(max-width:860px){
   .videos-progress-bar {
    width: 60%;
}
}