:root {
    /* Colors */
    --color-primary-green: #1aa420;
    /* Verified from HTML */
    --color-primary-green-hover: #158a1c;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    /* Subdued text */
    --color-background: #ffffff;
    --color-background-secondary: #f0f0f0;
    --color-announcement-bg: #0679ff;
    /* Blue from header text/announcement? Checking... Source says --background: 6 121 255 which is #0679FF */
    --color-announcement-text: #f0f0f0;

    /* Typography */
    --font-family-base: 'Barlow', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-h1: 1.5rem;
    /* Mobile */

    /* Spacing */
    --container-padding: 1.25rem;
    --container-max-width: 1300px;

    /* Borders */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}

@media (min-width: 768px) {
    :root {
        --font-size-h1: 2.5rem;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.bold {
    font-weight: 700;
}

/* Announcement Bar */
.announcement-bar {
    background-color: var(--color-announcement-bg);
    color: var(--color-announcement-text);
    text-align: center;
    padding: 8px 0;
    font-weight: 700;
}

/* Header */
.header {
    background-color: var(--color-background-secondary);
    padding: 1rem 0;
    position: relative;
}

.header__wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.header__logo {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    text-align: center;
}

.header__left,
.header__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header__right {
    justify-content: flex-end;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    /* Header text color often blue or black. Source uses #0679ff for header text? Checking... --header-text: 6 121 255. Let's stick to black for icons unless specific*/
    color: #0679ff;
    /* Matches source header text color */
}

.cart-icon-wrapper {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-primary-green);
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Hidden if 0 */
}

/* Responsive Helpers */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }
}

/* Product Section */
.product-section {
    padding-bottom: 2rem;
}

.product-wrapper {
    display: grid;
    gap: 2rem;
}

@media (min-width: 992px) {
    .product-wrapper {
        grid-template-columns: 1.1fr 0.9fr;
        /* As per source CSS */
        gap: 4rem;
    }
}

/* Product Gallery */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.main-image-container {
    position: relative;
    background: #f9f9f9;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.main-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.badge-discount {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-primary-green);
    color: white;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    font-size: var(--font-size-xs);
}

.thumbnails-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.thumbnail {
    flex: 0 0 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
}

.thumbnail.active {
    border-color: var(--color-text-primary);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info */
.product-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-title {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.1;
}

.reviews-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.stars {
    color: #fdbc00;
    letter-spacing: 2px;
}

.review-count {
    color: var(--color-text-secondary);
}

/* Price */
.price-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.current-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-green);
}

.compare-price {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.save-badge {
    background: var(--color-primary-green);
    color: white;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Offer Box */
.offer-box {
    background-color: #eaf2ed;
    /* Light green/gray */
    color: #0679ff;
    /* Blue text */
    padding: 1rem;
    border-radius: var(--border-radius-md);
    display: flex;
    gap: 1rem;
    align-items: center;
}

.offer-box .icon {
    font-size: 1.5rem;
}

/* Variant Picker */
.variant-label {
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
}

.variant-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.variant-option input {
    display: none;
}

.option-box {
    display: block;
    padding: 10px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.variant-option input:checked+.option-box {
    background-color: var(--color-text-primary);
    color: white;
    border-color: var(--color-text-primary);
}

.variant-option:hover .option-box {
    border-color: var(--color-text-primary);
}

/* Controls */
.action-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quantity-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qty-controls {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: var(--border-radius-md);
    width: fit-content;
}

.qty-controls button {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    color: var(--color-text-primary);
}

.qty-controls input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
    /* Standard property */
}

.buy-button {
    background-color: var(--color-primary-green);
    color: white;
    width: 100%;
    padding: 16px;
    border-radius: var(--border-radius-md);
    font-size: 1.125rem;
    font-weight: 700;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(26, 164, 32, 0.3);
}

.buy-button:hover {
    box-shadow: 0 4px 12px rgba(26, 164, 32, 0.4);
}

.info-title {
    color: #0679ff;
    /* Brighter Blue */
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.offer-line {
    font-size: 1.5rem;
    /* Larger font size */
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
    /* "1 Un de ... por" text color */
}

.strike-red {
    text-decoration: line-through;
    color: red !important;
    text-decoration-color: red !important;
    margin: 0 2px;
    font-weight: bold;
}

.price-green {
    color: var(--color-primary-green) !important;
    font-weight: 800;
    font-size: 1.1em;
}

.sticky-price {
    font-size: 1rem;
    font-weight: 700;
}

/* Content Sections */
.description-section,
.dermatologist-section,
.accordion-section {
    padding: 3rem 0;
    border-top: 1px solid #eee;
}

.prose {
    max-width: 800px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.description-section img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    margin: 1.5rem 0;
}

.section-title-highlight {
    color: #0679ff;
    font-weight: 800;
    margin: 2rem 0 1rem;
    text-transform: uppercase;
}

.check-list {
    display: inline-block;
    text-align: left;
    margin: 1rem 0;
}

.check-list li {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.info-card {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    margin: 2rem 0;
    text-align: left;
}

.info-card h3 {
    color: #0679ff;
    margin-bottom: 1rem;
}

/* Accordion */
.accordion-item {
    border-bottom: 1px solid #eee;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: left;
    transition: color 0.2s;
}

.accordion-header:hover {
    color: var(--color-primary-green);
}

.accordion-content {
    display: none;
    padding-bottom: 1.5rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.accordion-content.open {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.footer {
    background-color: var(--color-background-secondary);
    padding: 2rem 0;
    text-align: center;
    margin-top: 2rem;
}

.footer-logo {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.copyright {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* Testimonials */
.testimonials-section {
    padding: 3rem 0;
    border-top: 1px solid #eee;
    background-color: #fafafa;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.review-card {
    background: white;
    border-radius: var(--border-radius-md);
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Slightly stronger shadow */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    /* Uniform height */
}

.review-images {
    display: flex;
    gap: 4px;
    /* Small gap between before/after */
}

.review-images img {
    flex: 1;
    width: 0;
    /* Ensures equal split */
    min-width: 0;
    aspect-ratio: 4/5;
    /* Taller ratio like portraits */
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    background: #eee;
}

.review-images.single-image img {
    width: 100%;
    flex: none;
    aspect-ratio: 4/3;
    /* or auto? */
    object-position: top;
}

.reviewer-name {
    font-weight: 700;
    font-size: 0.95rem;
    /* Larger name */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333;
}

.verified-badge {
    color: var(--color-primary-green);
    font-size: 0.8rem;
}

.review-stars {
    color: #fdbc00;
    letter-spacing: 2px;
    font-size: 0.8rem;
    margin: 0.25rem 0;
}

.review-card p {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

   / *   I n f o   H i g h l i g h t   S e c t i o n   * /     . i n f o - h i g h l i g h t - s e c t i o n    {
                 p a d d i n g :    3 r e m   0 ;
                 t e x t - a l i g n :    c e n t e r ;
                 b a c k g r o u n d - c o l o r :    # f f f ;
         
}

         . i n f o - t i t l e    {
                 c o l o r :    # 0 0 5 6 b 3 ;
       / *   D a r k e r   B l u e   * /             f o n t - s i z e :    2 r e m ;
                 f o n t - w e i g h t :    8 0 0 ;
                 t e x t - t r a n s f o r m :    u p p e r c a s e ;
                 m a r g i n - b o t t o m :    2 r e m ;
                 l i n e - h e i g h t :    1 . 2 ;
         
}

         . i n f o - t e x t    {
                 m a x - w i d t h :    8 0 0 p x ;
                 m a r g i n :    0   a u t o   2 r e m ;
                 c o l o r :    v a r ( - - c o l o r - t e x t - s e c o n d a r y ) ;
                 l i n e - h e i g h t :    1 . 6 ;
         
}

         . b a d g e - b o x    {
                 d i s p l a y :    i n l i n e - f l e x ;
                 a l i g n - i t e m s :    c e n t e r ;
                 b a c k g r o u n d :    # f 0 f 0 f 0 ;
                 b o r d e r - r a d i u s :    8 p x ;
                 p a d d i n g :    1 0 p x   2 0 p x ;
                 m a r g i n - b o t t o m :    2 r e m ;
                 b o r d e r - l e f t :    5 p x   s o l i d   # 0 0 5 6 b 3 ;
         
}

         . b a d g e - n u m b e r    {
                 f o n t - s i z e :    2 . 5 r e m ;
                 f o n t - w e i g h t :    8 0 0 ;
                 c o l o r :    # 0 0 5 6 b 3 ;
                 m a r g i n - r i g h t :    1 5 p x ;
         
}

         . b a d g e - t e x t    {
                 t e x t - a l i g n :    l e f t ;
                 f o n t - w e i g h t :    7 0 0 ;
                 c o l o r :    # 3 3 3 ;
                 l i n e - h e i g h t :    1 . 2 ;
         
}

         / *   D a r k   R e v i e w s   S e c t i o n   * /     . d a r k - r e v i e w s - s e c t i o n    {
                 b a c k g r o u n d - c o l o r :    # 3 6 4 1 5 6 ;
       / *   D a r k   B l u e / G r e y   * /             p a d d i n g :    4 r e m   0 ;
                 c o l o r :    w h i t e ;
         
}

         . d a r k - r e v i e w s - g r i d    {
                 d i s p l a y :    g r i d ;
                 g r i d - t e m p l a t e - c o l u m n s :    r e p e a t ( a u t o - f i t ,    m i n m a x ( 3 0 0 p x ,    1 f r ) ) ;
                 g a p :    2 r e m ;
                 m a x - w i d t h :    1 0 0 0 p x ;
                 m a r g i n :    0   a u t o ;
         
}

         . d a r k - r e v i e w - c a r d    {
                 b a c k g r o u n d - c o l o r :    t r a n s p a r e n t ;
                 p a d d i n g :    1 . 5 r e m ;
                 t e x t - a l i g n :    c e n t e r ;
       / *   C e n t e r e d   c o n t e n t   * /             d i s p l a y :    f l e x ;
                 f l e x - d i r e c t i o n :    c o l u m n ;
                 a l i g n - i t e m s :    c e n t e r ;
                 g a p :    1 r e m ;
         
}

         . d a r k - a v a t a r    {
                 w i d t h :    1 2 0 p x ;
                 h e i g h t :    1 2 0 p x ;
                 b o r d e r - r a d i u s :    5 0 % ;
                 b o r d e r :    4 p x   s o l i d   w h i t e ;
                 o b j e c t - f i t :    c o v e r ;
         
}

         . d a r k - s t a r s    {
                 c o l o r :    # f d b c 0 0 ;
                 f o n t - s i z e :    1 . 2 r e m ;
         
}

         . d a r k - c l i e n t - n a m e    {
                 f o n t - s i z e :    1 . 2 5 r e m ;
                 f o n t - w e i g h t :    7 0 0 ;
                 m a r g i n - b o t t o m :    0 . 2 5 r e m ;
         
}

         . d a r k - r e v i e w - t e x t    {
                 f o n t - s i z e :    0 . 9 5 r e m ;
                 l i n e - h e i g h t :    1 . 5 ;
                 o p a c i t y :    0 . 9 ;
         
}

      
 / *   C a r o u s e l   S l i d e r   * /  
 . m a i n - i m a g e - c a r o u s e l   {  
         p o s i t i o n :   r e l a t i v e ;  
         b a c k g r o u n d :   # f 9 f 9 f 9 ;  
         b o r d e r - r a d i u s :   v a r ( - - b o r d e r - r a d i u s - l g ) ;  
         o v e r f l o w :   h i d d e n ;  
 }  
  
 . c a r o u s e l - t r a c k   {  
         d i s p l a y :   f l e x ;  
         o v e r f l o w - x :   a u t o ;  
         s c r o l l - s n a p - t y p e :   x   m a n d a t o r y ;  
         s c r o l l - b e h a v i o r :   s m o o t h ;  
         - w e b k i t - o v e r f l o w - s c r o l l i n g :   t o u c h ;  
         s c r o l l b a r - w i d t h :   n o n e ;   / *   F i r e f o x   * /  
 }  
  
 . c a r o u s e l - t r a c k : : - w e b k i t - s c r o l l b a r   {  
         d i s p l a y :   n o n e ;   / *   C h r o m e / S a f a r i   * /  
 }  
  
 . c a r o u s e l - s l i d e   {  
         f l e x :   0   0   1 0 0 % ;  
         w i d t h :   1 0 0 % ;  
         s c r o l l - s n a p - a l i g n :   s t a r t ;  
         o b j e c t - f i t :   c o v e r ;  
         d i s p l a y :   b l o c k ;  
 }  
 