@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}}@layer bricks {:where(.brxe-svg){height:auto;width:auto}:where(.brxe-svg) svg{height:auto;max-width:100%;overflow:visible;width:auto}}@layer bricks {.brxe-text-link{gap:5px}.brxe-text-link,.brxe-text-link span{align-items:center;display:inline-flex}.brxe-text-link span{justify-content:center}}@layer bricks {.brxe-code{width:100%}} * { box-sizing: border-box; } .skip-link { position: absolute; top: -100px; left: 0; background-color: var(--color-primary); color: var(--color-white); padding: 0.75rem 1.5rem; text-decoration: none; font-weight: var(--font-weight-semibold); z-index: 10000; } .skip-link:focus { top: 0; outline: 3px solid var(--color-white); outline-offset: 2px; }@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}.single-product__back-btn-icon { width: 24px; height: 24px; transition: transform var(--transition-fast); flex-shrink: 0; } .single-product__back-btn:hover .single-product__back-btn-icon { transform: translateX(-4px); }.single-product__back-btn-text { display: block; }@media (max-width: 767px) { .single-product__back-btn-text { display: none; }}.single-product__back-btn { position: sticky; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-button); font-family: var(--font-family-primary); font-size: 0.9375rem; font-weight: var(--font-weight-medium); color: var(--color-text-dark); cursor: pointer; box-shadow: var(--shadow-sm); transition: all var(--transition-fast); margin: 1rem; } .single-product__back-btn:hover { background-color: var(--color-bg-lighter); border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateX(-2px); } .single-product__back-btn:active { transform: translateX(0); box-shadow: var(--shadow-sm); } .single-product__back-btn:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; }@media (max-width: 767px) { .single-product__back-btn { margin: 0.5rem; padding: 0.625rem 0.875rem; } .single-product__back-btn { width: 44px; height: 44px; justify-content: center; padding: 0; }}.single-product__image { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background-color: var(--color-bg-light); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }.single-product__title { display: block; font-family: var(--font-family-primary); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--color-text-dark); margin: 0; }.single-product__price { display: flex; align-items: baseline; gap: 0.75rem; font-family: var(--font-family-primary); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: var(--font-weight-bold); color: var(--color-primary); margin: 0; }.single-product__excerpt { display: block; font-family: var(--font-family-primary); font-size: clamp(0.9375rem, 2.5vw, 1.0625rem); font-weight: var(--font-weight-normal); line-height: var(--line-height-base); color: var(--color-text-light); margin: 0; }.single-product__info { display: flex; flex-direction: column; gap: clamp(1rem, 3vw, 1.5rem); width: 100%; }.single-product__wrapper { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); width: 100%; }@media (min-width: 768px) { .single-product__wrapper { grid-template-columns: 1fr 1fr; }}@media (min-width: 1024px) { .single-product__wrapper { gap: 4rem; }}.single-product__container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 1rem; }@media (min-width: 768px) { .single-product__container { padding: 0 2rem; }}@media (min-width: 1024px) { .single-product__container { padding: 0 2.5rem; }}@media (min-width: 1440px) { .single-product__container { padding: 0 3rem; }}.single-product { display: flex; align-items: flex-start; justify-content: center; width: 100%; background-color: var(--color-white); padding: clamp(2rem, 5vw, 3rem) 0; }