:root {
    /* Design System — 3 couleurs : #DA291C, noir, blanc */
    --color-primary: #DA291C;
    --color-primary-light: #fff5f5;
    --color-primary-dark: #111111;
    --color-secondary: #111111;
    --color-secondary-light: #111111;
    --color-accent: #DA291C;
    --color-accent-yellow: #DA291C;
    --color-white: #ffffff;
    --color-light: #ffffff;
    --color-gray: #e5e7eb;
    --color-text: #111111;
    --color-text-light: #111111;
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-error: #DC2626;
    --color-info: #2563EB;
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-dark: #111111;
    --bg-light: #ffffff;
}

:root {
    --font-secondary:'Inter',system-ui,sans-serif;
--font-secondary:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif,}

:root {
    --line-height-tight:1.2;
    --line-height-normal:1.5;
    --line-height-relaxed:1.75;
--line-height-loose:2}

:root {
    --letter-spacing-tight:0.010em;
    --letter-spacing-normal:0.03em;
    --letter-spacing-wide:0.10em;
    --letter-spacing-wider:0.13em;
--letter-spacing-widest:0.18em}

:root {
    --paragraph-spacing-xs:0.5rem;
    --paragraph-spacing-sm:1rem;
    --paragraph-spacing-md:1.5rem;
    --paragraph-spacing-lg:2rem;
--paragraph-spacing-xl:2.5rem}

.h1,h1 {
    font-family:var(--font-primary);
    font-size:3.5rem;
    font-weight:700;
    line-height:var(--line-height-tight);
    letter-spacing:var(--letter-spacing-tight);
    margin-bottom:var(--paragraph-spacing-lg);
color:var(--color-secondary)}

.h2,h2 {
    font-family:var(--font-primary);
    font-size:2.5rem;
    font-weight:600;
    line-height:var(--line-height-tight);
    letter-spacing:var(--letter-spacing-tight);
    margin-bottom:var(--paragraph-spacing-md);
color:var(--color-secondary)}

.h3,h3 {
    font-family:var(--font-primary);
    font-size:2rem;
    font-weight:600;
    line-height:var(--line-height-normal);
    letter-spacing:var(--letter-spacing-normal);
    margin-bottom:var(--paragraph-spacing-md);
color:var(--color-secondary)}

.h4,h4 {
    font-family:var(--font-primary);
    font-size:1.5rem;
    font-weight:600;
    line-height:var(--line-height-normal);
    letter-spacing:var(--letter-spacing-normal);
    margin-bottom:var(--paragraph-spacing-sm);
color:var(--color-secondary)}

.h5,h5 {
    font-family:var(--font-primary);
    font-size:1.25rem;
    font-weight:500;
    line-height:var(--line-height-normal);
    letter-spacing:var(--letter-spacing-wide);
    margin-bottom:var(--paragraph-spacing-sm);
color:var(--color-secondary)}

.h6,h6 {
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:500;
    line-height:var(--line-height-normal);
    letter-spacing:var(--letter-spacing-wider);
    margin-bottom:var(--paragraph-spacing-sm);
    color:var(--color-secondary);
text-transform:uppercase}

.text-xs {
    font-family:var(--font-secondary);
    font-size:.75rem;
    line-height:var(--line-height-normal);
letter-spacing:var(--letter-spacing-normal)}

.body-s,.text-sm {
    font-family:var(--font-secondary);
    font-size:.875rem;
    line-height:var(--line-height-relaxed);
letter-spacing:var(--letter-spacing-normal)}

.body-m,.text-base {
    font-family:var(--font-secondary);
    font-size:1rem;
    line-height:var(--line-height-relaxed);
letter-spacing:var(--letter-spacing-normal)}

.body-l,.text-lg {
    font-family:var(--font-secondary);
    font-size:1.125rem;
    line-height:var(--line-height-relaxed);
letter-spacing:var(--letter-spacing-normal)}

.text-xl {
    font-family:var(--font-secondary);
    font-size:1.25rem;
    line-height:var(--line-height-relaxed);
letter-spacing:var(--letter-spacing-normal)}

.paragraph,p {
    font-family:var(--font-secondary);
    font-size:1rem;
    line-height:var(--line-height-relaxed);
    color:var(--color-text-light);
margin-bottom:var(--paragraph-spacing-md)}

.btn {
    font-family:var(--font-primary);
    font-weight:500;
    text-align:center;
    text-decoration:none;
    display:inline-block;
    border:2px solid transparent;
    cursor:pointer;
    transition:all .3s ease;
    line-height:1;
letter-spacing:var(--letter-spacing-wide)}

.btn-sm {
    padding:.5rem 1.5rem;
    font-size:.875rem;
border-radius:1.5rem}

.btn-md {
    padding:.75rem 2rem;
    font-size:1rem;
border-radius:2rem}

.btn-lg {
    padding:1rem 2.5rem;
    font-size:1.125rem;
border-radius:2.5rem}

.btn-primary {
    background-color:var(--color-secondary);
    color:var(--color-white);
border-color:var(--color-secondary)}

.btn-primary:hover {
    background-color:var(--color-secondary-light);
    border-color:var(--color-secondary-light);
    transform:translateY(-2px);
box-shadow:var(--shadow-md)}

.btn-primary:active {
    background-color:var(--color-secondary);
    transform:translateY(0);
box-shadow:var(--shadow-sm)}

.btn-primary:disabled {
    background-color:var(--color-gray);
    border-color:var(--color-gray);
    color:var(--color-text-light);
    cursor:not-allowed;
    opacity:.6;
transform:none}

.btn-primary-outline {
    background-color:transparent;
    color:var(--color-secondary);
border-color:var(--color-secondary)}

.btn-primary-outline:hover {
    background-color:var(--color-secondary);
    color:var(--color-white);
    transform:translateY(-2px);
box-shadow:var(--shadow-md)}

.btn-primary-outline:active {
    background-color:var(--color-secondary-light);
transform:translateY(0)}

.btn-primary-outline:disabled {
    background-color:transparent;
    border-color:var(--color-gray);
    color:var(--color-text-light);
    cursor:not-allowed;
    opacity:.6;
transform:none}

.btn-secondary {
    background-color:var(--color-primary);
    color:var(--color-secondary);
border-color:var(--color-primary)}

.btn-secondary:hover {
    background-color:var(--color-primary-dark);
    border-color:var(--color-primary-dark);
    transform:translateY(-2px);
box-shadow:var(--shadow-md)}

.btn-secondary:active {
    background-color:var(--color-primary);
    transform:translateY(0);
box-shadow:var(--shadow-sm)}

.btn-secondary:disabled {
    background-color:var(--color-gray);
    border-color:var(--color-gray);
    color:var(--color-text-light);
    cursor:not-allowed;
    opacity:.6;
transform:none}

.btn-secondary-outline {
    display:flex;
    background-color:transparent;
    color:var(--color-primary-dark);
    border-color:var(--color-primary);
justify-content:center}

.btn-secondary-outline:hover {
    background-color:var(--color-primary);
    color:var(--color-secondary);
    transform:translateY(-2px);
box-shadow:var(--shadow-md)}

.btn-secondary-outline:active {
    background-color:var(--color-primary-dark);
transform:translateY(0)}

.btn-secondary-outline:disabled {
    background-color:transparent;
    border-color:var(--color-gray);
    color:var(--color-text-light);
    cursor:not-allowed;
    opacity:.6;
transform:none}

.btn-accent {
    background-color:var(--color-accent);
    color:var(--color-secondary);
border-color:var(--color-accent)}

.btn-accent:hover {
    background-color:var(--color-accent-yellow);
    border-color:var(--color-accent-yellow);
    transform:translateY(-2px);
box-shadow:var(--shadow-md)}

:root {
    --space-xs:0.25rem;
    --space-sm:0.5rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;
    --space-2xl:3rem;
    --space-3xl:4rem;
    --space-4xl:6rem;
--space-5xl:8rem}

.m-xs {
margin:var(--space-xs)}

.m-sm {
margin:var(--space-sm)}

.m-md {
margin:var(--space-md)}

.m-lg {
margin:var(--space-lg)}

.m-xl {
margin:var(--space-xl)}

.m-2xl {
margin:var(--space-2xl)}

.m-3xl {
margin:var(--space-3xl)}

.mt-xs {
margin-top:var(--space-xs)}

.mt-sm {
margin-top:var(--space-sm)}

.mt-md {
margin-top:var(--space-md)}

.mt-lg {
margin-top:var(--space-lg)}

.mt-xl {
margin-top:var(--space-xl)}

.mt-2xl {
margin-top:var(--space-2xl)}

.mt-3xl {
margin-top:var(--space-3xl)}

.mb-xs {
margin-bottom:var(--space-xs)}

.mb-sm {
margin-bottom:var(--space-sm)}

.mb-md {
margin-bottom:var(--space-md)}

.mb-lg {
margin-bottom:var(--space-lg)}

.mb-xl {
margin-bottom:var(--space-xl)}

.mb-2xl {
margin-bottom:var(--space-2xl)}

.mb-3xl {
margin-bottom:var(--space-3xl)}

.p-xs {
padding:var(--space-xs)}

.p-sm {
padding:var(--space-sm)}

.p-md {
padding:var(--space-md)}

.p-lg {
padding:var(--space-lg)}

.p-xl {
padding:var(--space-xl)}

.p-2xl {
padding:var(--space-2xl)}

.p-3xl {
padding:var(--space-3xl)}

.pt-xs {
padding-top:var(--space-xs)}

.pt-sm {
padding-top:var(--space-sm)}

.pt-md {
padding-top:var(--space-md)}

.pt-lg {
padding-top:var(--space-lg)}

.pt-xl {
padding-top:var(--space-xl)}

.pt-2xl {
padding-top:var(--space-2xl)}

.pt-3xl {
padding-top:var(--space-3xl)}

.pb-xs {
padding-bottom:var(--space-xs)}

.pb-sm {
padding-bottom:var(--space-sm)}

.pb-md {
padding-bottom:var(--space-md)}

.pb-lg {
padding-bottom:var(--space-lg)}

.pb-xl {
padding-bottom:var(--space-xl)}

.pb-2xl {
padding-bottom:var(--space-2xl)}

.pb-3xl {
padding-bottom:var(--space-3xl)}

:root {
    --radius-none:0;
    --radius-sm:0.25rem;
    --radius-md:0.5rem;
    --radius-lg:1rem;
    --radius-xl:1.5rem;
    --radius-2xl:2rem;
    --radius-full:9999px;
--radius-card:1.25rem}

.rounded-none {
border-radius:var(--radius-none)}

.rounded-sm {
border-radius:var(--radius-sm)}

.rounded-md {
border-radius:var(--radius-md)}

.rounded-lg {
border-radius:var(--radius-lg)}

.rounded-xl {
border-radius:var(--radius-xl)}

.rounded-2xl {
border-radius:var(--radius-2xl)}

.rounded-full {
border-radius:var(--radius-full)}

.rounded-card {
border-radius:var(--radius-card)}

:root {
    --shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl:0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner:inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-none:none;
    --shadow-card:0 4px 12px rgba(201, 184, 163, 0.15);
--shadow-card-hover:0 8px 24px rgba(201, 184, 163, 0.25)}

.shadow-none {
box-shadow:var(--shadow-none)}

.shadow-sm {
box-shadow:var(--shadow-sm)}

.shadow-md {
box-shadow:var(--shadow-md)}

.shadow-lg {
box-shadow:var(--shadow-lg)}

.shadow-xl {
box-shadow:var(--shadow-xl)}

.shadow-2xl {
box-shadow:var(--shadow-2xl)}

.shadow-inner {
box-shadow:var(--shadow-inner)}

.shadow-card {
box-shadow:var(--shadow-card)}

.card {
    background-color:var(--color-white);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    overflow:hidden;
transition:all .3s ease}

.card:hover {
    box-shadow:var(--shadow-card-hover);
transform:translateY(-4px)}

.card-body {
padding:var(--space-lg)}

.container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
padding:0 var(--space-lg)}

.grid {
    display:grid;
gap:var(--space-lg)}

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

.grid-3 {
grid-template-columns:repeat(3,1fr)}

.grid-4 {
grid-template-columns:repeat(4,1fr)}

.flex {
display:flex}

.flex-col {
flex-direction:column}

.items-center {
align-items:center}

.justify-center {
justify-content:center}

.justify-between {
justify-content:space-between}

.gap-sm {
gap:var(--space-sm)}

.gap-md {
gap:var(--space-md)}

.gap-lg {
gap:var(--space-lg)}

.img-rounded {
    border-radius:var(--radius-card);
overflow:hidden}

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

@media (max-width:768px) {
    .h1,h1 {
    font-size:2.5rem}

    .h2,h2 {
    font-size:2rem}

    .h3,h3 {
    font-size:1.5rem}

    .grid-2,.grid-3,.grid-4 {
    grid-template-columns:1fr}

    .btn-lg {
        padding:.875rem 2rem;
    font-size:1rem}

}

@media (max-width:480px) {
    .h1,h1 {
    font-size:2rem}

    .h2,h2 {
    font-size:1.5rem}

    .container {
    padding:0 var(--space-md)}

}

.navbar {
    z-index:1020;
    background-color:var(--color-white);
    padding:var(--space-lg) 0;
    box-shadow:var(--shadow-sm);
    position:fixed;
    top:0;
    left:0;
    right:0;
transition:all .3s ease}

.navbar.scrolled {
    z-index:1020;
    padding:var(--space-md) 0;
box-shadow:var(--shadow-md)}

.nav-wrapper {
    display:flex;
    justify-content:space-between;
    align-items:center;
gap:var(--space-2xl)}

.logo {
    display:flex;
    align-items:center;
    text-decoration:none;
transition:transform .3s ease}

.logo:hover {
transform:scale(1.05)}

.logo-img {
    max-width:150px;
    height:50px;
object-fit:contain}

.nav-menu {
    display:flex;
    list-style:none;
    gap:var(--space-xl);
    margin:0;
    padding:0;
    flex:1;
justify-content:center}

.nav-item {
position:relative}

.nav-link {
    text-decoration:none;
    color:var(--color-secondary);
    font-family:var(--font-primary);
    font-weight:500;
    font-size:.9375rem;
    padding:var(--space-sm) 0;
    transition:color .3s ease;
    position:relative;
display:inline-block}

.nav-link::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:2px;
    background-color:var(--color-primary);
transition:width .3s ease}

.nav-link:hover {
color:var(--color-primary-dark)}

.nav-link.active::after,.nav-link:hover::after {
width:100%}

.nav-actions {
    display:flex;
    align-items:center;
gap:var(--space-md)}

.nav-icon {
    background:0 0;
    border:none;
    color:var(--color-secondary);
    cursor:pointer;
    padding:var(--space-sm);
    border-radius:var(--radius-md);
    transition:all .3s ease;
    position:relative;
    display:flex;
    align-items:center;
justify-content:center}

.nav-icon:hover {
    background-color:var(--color-light);
    color:var(--color-primary-dark);
transform:scale(1.1)}

.nav-icon svg {
vertical-align:middle}

.cart-badge {
    position:absolute;
    top:0;
    right:0;
    background-color:var(--color-accent);
    color:var(--color-secondary);
    font-size:.625rem;
    font-weight:700;
    padding:2px 6px;
    border-radius:var(--radius-full);
    min-width:18px;
    text-align:center;
line-height:1}

@keyframes cartBadgeBounce {
    0% {
    transform:translate(-50%,-50%) scale(1)}

    50% {
    transform:translate(-50%,-50%) scale(1.4)}

    100% {
    transform:translate(-50%,-50%) scale(1)}

}

.cart-badge-bounce {
animation:cartBadgeBounce .4s ease}

.nav-toggler {
    display:none;
    flex-direction:column;
    justify-content:space-around;
    width:32px;
    height:32px;
    background:0 0;
    border:none;
    cursor:pointer;
    padding:var(--space-xs);
    border-radius:var(--radius-md);
transition:background-color .3s ease}

.nav-toggler:hover {
background-color:var(--color-light)}

.toggler-line {
    width:100%;
    height:2px;
    background-color:var(--color-primary-light);
    border-radius:var(--radius-sm);
transition:all .3s ease}

.nav-toggler.active .toggler-line:first-child {
transform:translateY(8px) rotate(45deg)}

.nav-toggler.active .toggler-line:nth-child(2) {
opacity:0}

.nav-toggler.active .toggler-line:nth-child(3) {
transform:translateY(-8px) rotate(-45deg)}

.cart-offcanvas {
    width:400px!important;
max-width:90vw}

.offcanvas-header {
    padding:var(--space-xl);
    border-bottom:1px solid var(--color-gray);
    display:flex;
    justify-content:space-between;
align-items:center}

.offcanvas-title {
    margin:0;
    display:flex;
    align-items:center;
color:var(--color-secondary)}

.btn-close-custom {
    background:0 0;
    border:none;
    cursor:pointer;
    padding:var(--space-sm);
    border-radius:var(--radius-md);
    transition:all .3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
color:var(--color-text-light)}

.btn-close-custom:hover {
    background-color:var(--color-light);
color:var(--color-secondary)}

.offcanvas-body {
    padding:var(--space-xl);
overflow-y:auto}

.offcanvas-footer {
    padding:var(--space-xl);
    border-top:1px solid var(--color-gray);
background-color:var(--color-light)}

.cart-empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:var(--space-xl) 0;
text-align:center}

.cart-empty-icon {
    color:var(--color-primary);
    opacity:.4;
margin-bottom:var(--space-lg)}

.cart-empty-text {
    color:var(--color-text-light);
    font-size:1rem;
margin-bottom:var(--space-lg)}

.cart-items {
    display:flex;
    flex-direction:column;
gap:var(--space-md)}

.cart-item {
    display:flex;
    gap:var(--space-md);
    padding:var(--space-md);
    background-color:var(--color-light);
    border-radius:var(--radius-md);
position:relative}

.cart-item-image {
    flex-shrink:0;
    width:70px;
    height:70px;
    border-radius:var(--radius-sm);
    overflow:hidden;
background-color:var(--color-white)}

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

.cart-item-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
color:var(--color-primary)}

.cart-item-info {
    flex:1;
    display:flex;
    flex-direction:column;
gap:var(--space-xs)}

.cart-item-name {
    font-family:var(--font-primary);
    font-size:.9375rem;
    font-weight:600;
    color:var(--color-secondary);
    margin:0;
line-height:1.3}

.cart-item-category {
    font-size:.75rem;
    color:var(--color-text-light);
margin:0}

.cart-item-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
gap:var(--space-md)}

.cart-item-price {
    font-family:var(--font-primary);
    font-size:.9375rem;
    font-weight:600;
color:var(--color-secondary)}

.cart-item-remove {
    position:absolute;
    top:var(--space-sm);
    right:var(--space-sm);
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--color-white);
    border:1px solid var(--color-gray);
    border-radius:var(--radius-full);
    color:var(--color-error);
    cursor:pointer;
transition:all .3s ease}

.cart-item-remove:hover {
    background-color:var(--color-error);
    border-color:var(--color-error);
    color:var(--color-white);
transform:scale(1.1)}

.cart-quantity {
    display:inline-flex;
    align-items:center;
    gap:var(--space-xs);
    background-color:var(--color-white);
    border:1px solid var(--color-gray);
    border-radius:var(--radius-md);
padding:var(--space-xs)}

.cart-quantity-btn {
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:transparent;
    border:none;
    border-radius:var(--radius-sm);
    color:var(--color-secondary);
    cursor:pointer;
transition:all .2s ease}

.cart-quantity-btn:hover {
    background-color:var(--color-light);
color:var(--color-primary-dark)}

.cart-quantity-btn:active {
transform:scale(.95)}

.cart-quantity-value {
    min-width:32px;
    text-align:center;
    font-family:var(--font-primary);
    font-size:.875rem;
    font-weight:600;
color:var(--color-secondary)}

.cart-summary {
    padding:var(--space-lg);
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
margin-bottom:var(--space-lg)}

.cart-summary-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
margin-bottom:var(--space-sm)}

.cart-summary-label {
    font-size:.875rem;
    color:var(--color-text-light);
    display:flex;
align-items:center}

.cart-summary-value {
    font-size:.875rem;
    color:var(--color-text);
font-weight:500}

.cart-summary-divider {
    height:1px;
    background-color:var(--color-gray);
margin:var(--space-md) 0}

.cart-summary-total {
    display:flex;
    justify-content:space-between;
align-items:center}

.cart-summary-total-label {
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:700;
color:var(--color-secondary)}

.cart-summary-total-value {
    font-family:var(--font-primary);
    font-size:1.5rem;
    font-weight:700;
color:var(--color-secondary)}

.btn-link-muted {
    display:block;
    width:100%;
    padding:var(--space-sm);
    background:0 0;
    border:none;
    font-family:var(--font-secondary);
    font-size:.875rem;
    color:var(--color-text-light);
    text-align:center;
    cursor:pointer;
transition:color .2s ease}

.btn-link-muted:hover {
    color:var(--color-secondary);
text-decoration:underline}

.w-100 {
width:100%}

.ms-1 {
margin-left:.25rem}

.ms-2 {
margin-left:.5rem}

.spinner {
animation:spin 1s linear infinite}

@keyframes spin {
    from {
    transform:rotate(0)}

    to {
    transform:rotate(360deg)}

}

.toast-container {
    position:fixed;
    bottom:0;
    right:0;
    padding:var(--space-md);
z-index:1090}

.toast-digimar {
    background-color:var(--color-white);
    border-radius:var(--radius-md);
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    padding:var(--space-md) var(--space-lg);
    margin-bottom:var(--space-sm);
    opacity:0;
    transform:translateX(100%);
transition:all .3s ease}

.toast-digimar.show {
    opacity:1;
transform:translateX(0)}

.toast-digimar-body {
    display:flex;
    align-items:center;
gap:var(--space-md)}

.toast-digimar-icon {
    flex-shrink:0;
    display:flex;
align-items:center}

.toast-digimar-message {
    font-family:var(--font-secondary);
    font-size:.9375rem;
color:var(--color-text)}

.toast-success .toast-digimar-icon {
color:var(--color-success)}

.toast-danger .toast-digimar-icon {
color:var(--color-error)}

.contact-page {
padding:var(--space-4xl) 0}

.contact-wrapper {
    max-width:1000px;
margin:0 auto}

.contact-header {
    text-align:center;
margin-bottom:var(--space-4xl)}

.contact-header .lead {
    font-size:1.125rem;
    color:var(--color-text-light);
    max-width:600px;
margin:0 auto}

.contact-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
gap:var(--space-xl)}

.contact-card {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    padding:var(--space-2xl);
    text-align:center;
transition:all .3s ease}

.contact-card:hover {
    background:linear-gradient(135deg,#e5ddd4 0,var(--color-primary) 100%);
    transform:translateY(-8px);
box-shadow:var(--shadow-md)}

.card-icon {
    width:80px;
    height:80px;
    margin:0 auto var(--space-lg);
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--color-white);
    border-radius:50%;
color:var(--color-primary)}

.card-title {
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:600;
    color:var(--color-secondary);
margin-bottom:var(--space-sm)}

.card-link {
    color:var(--color-primary);
    text-decoration:none;
    font-weight:600;
font-size:.9375rem}

.card-link:hover {
text-decoration:underline}

.card-text {
    color:var(--color-text);
    font-size:.9375rem;
margin:0}

.success-page {
    padding:var(--space-3xl) 0;
min-height:70vh}

.success-wrapper {
    max-width:700px;
margin:0 auto}

.success-card {
    background-color:var(--color-white);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    padding:var(--space-3xl);
text-align:center}

.success-icon {
    margin:0 auto var(--space-xl);
    width:120px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary) 100%);
    border-radius:50%;
    color:var(--color-secondary);
animation:scaleIn .5s ease-out}

@keyframes scaleIn {
    0% {
        transform:scale(0);
    opacity:0}

    50% {
    transform:scale(1.1)}

    100% {
        transform:scale(1);
    opacity:1}

}

.success-title {
    font-family:var(--font-primary);
    font-size:2rem;
    font-weight:700;
    color:var(--color-secondary);
margin-bottom:var(--space-md)}

.success-message {
    font-size:1rem;
    color:var(--color-text);
    line-height:1.75;
margin-bottom:var(--space-xl)}

.success-section {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
    margin-bottom:var(--space-lg);
text-align:left}

.section-title {
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:600;
    color:var(--color-secondary);
    margin-bottom:var(--space-md);
    display:flex;
    align-items:center;
gap:var(--space-md)}

.section-title svg {
color:var(--color-primary)}

.product-list {
    list-style:none;
    padding:0;
margin:0}

.product-item {
    display:flex;
    justify-content:space-between;
    padding:var(--space-md) 0;
border-bottom:1px solid rgba(201,184,163,.2)}

.product-item:last-child {
border-bottom:none}

.product-name {
    font-family:var(--font-secondary);
color:var(--color-text)}

.product-quantity {
color:var(--color-text-light)}

.success-alert {
    background:linear-gradient(135deg,#e8f5e9 0,#c8e6c9 100%);
    border-left:4px solid var(--color-success);
    border-radius:var(--radius-lg);
    padding:var(--space-lg);
    display:flex;
    align-items:center;
    gap:var(--space-md);
    margin-bottom:var(--space-lg);
    text-align:left;
color:var(--color-text)}

.success-alert svg {
    flex-shrink:0;
color:var(--color-success)}

.success-actions {
    display:flex;
    flex-direction:column;
gap:var(--space-md)}

.btn-link {
    display:inline-block;
    font-family:var(--font-secondary);
    color:var(--color-text-light);
    text-decoration:none;
transition:color .2s ease}

.btn-link:hover {
    color:var(--color-secondary);
text-decoration:underline}

.success-contact {
    text-align:center;
margin-top:var(--space-xl)}

.success-contact p {
    font-size:.875rem;
color:var(--color-text-light)}

.success-contact a {
    color:var(--color-primary);
    text-decoration:none;
font-weight:600}

.success-contact a:hover {
text-decoration:underline}

@media (max-width:992px) {
    .nav-actions {
    margin-left:auto}

    .nav-toggler {
    display:flex}

    .nav-menu {
        position:fixed;
        top:80px;
        left:-100%;
        width:100%;
        max-width:300px;
        height:calc(100vh - 80px);
        background-color:var(--color-white);
        flex-direction:column;
        justify-content:flex-start;
        padding:var(--space-2xl) var(--space-xl);
        box-shadow:var(--shadow-xl);
        transition:left .3s ease;
        z-index:999;
    gap:var(--space-sm)}

    .nav-menu.active {
    left:0}

    .nav-item {
    width:100%}

    .nav-link {
        display:block;
        padding:var(--space-md) var(--space-lg);
        border-radius:var(--radius-md);
    font-size:1rem}

    .nav-link:hover {
    background-color:var(--color-light)}

    .nav-link::after {
    display:none}

    .nav-overlay {
        position:fixed;
        top:80px;
        left:0;
        width:100%;
        height:calc(100vh - 80px);
        background-color:rgba(0,0,0,.5);
        opacity:0;
        visibility:hidden;
        transition:all .3s ease;
    z-index:998}

    .nav-overlay.active {
        opacity:1;
    visibility:visible}

}

@media (max-width:768px) {
    .navbar {
    padding:var(--space-md) 0}

    .logo-img {
        max-width:100px;
    height:25px}

    .nav-actions {
    gap:var(--space-sm)}

    .cart-offcanvas {
    width:100%!important}

    .contact-cards {
        grid-template-columns:1fr;
    gap:var(--space-lg)}

    .success-card {
    padding:var(--space-xl)}

    .success-title {
    font-size:1.75rem}

    .success-icon {
        width:100px;
    height:100px}

    .success-icon svg {
        width:60px;
    height:60px}

}

@media (max-width:480px) {
    .offcanvas-body,.offcanvas-footer,.offcanvas-header {
    padding:var(--space-lg)}

    .cart-item {
    padding:var(--space-sm)}

    .cart-item-image {
        width:60px;
    height:60px}

    .cart-item-name {
    font-size:.875rem}

    .cart-summary {
    padding:var(--space-md)}

    .cart-summary-total-value {
    font-size:1.25rem}

    .contact-page {
    padding:var(--space-xl) 0}

    .success-page {
    padding:var(--space-xl) 0}

    .success-card {
    padding:var(--space-lg)}

    .success-title {
    font-size:1.5rem}

}

.hero {
    background-color:var(--color-primary);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    padding:var(--space-5xl) 0;
    overflow:hidden;
height:750px;
}


.hero .container {
    
    display:grid;
   
    gap:var(--space-4xl);
align-items:center}

.hero-badge {
margin-bottom:var(--space-lg)}

.badge {
    display:inline-block;
    padding:var(--space-sm) var(--space-lg);
    background-color:var(--color-white);
    border-radius:var(--radius-full);
    font-size:.875rem;
    font-weight:500;
    box-shadow:var(--shadow-md);
color:var(--color-secondary)}

.hero-title {
margin-bottom:var(--space-md)}

.hero-subtitle {
    color:var(--color-primary-dark);
margin-bottom:var(--space-lg)}

.hero-description {
    color:var(--color-text-light);
margin-bottom:var(--space-2xl)}

.hero-cta {
    display:flex;
    gap:var(--space-lg);
align-items:center}

.hero-link {
    color:var(--color-secondary);
    text-decoration:none;
    font-weight:500;
transition:transform .3s ease}

.hero-link:hover {
transform:translateX(5px)}

.hero-image-wrapper {
    position:relative;
    border-radius:var(--radius-2xl);
    overflow:hidden;
box-shadow:var(--shadow-2xl)}

.hero-image {
    width:100%;
    height:600px;
object-fit:cover}

.trust-bar {
    background-color:var(--color-white);
padding:var(--space-5xl) 0}

.trust-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
gap:var(--space-xl)}

.trust-item {
text-align:center}

.trust-icon {
    font-size:3rem;
margin-bottom:var(--space-md)}

.products-section {
    background-color:var(--bg-light);
padding:var(--space-4xl) 0}

.section-header {
    text-align:center;
margin-bottom:var(--space-3xl)}

.products-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-xl);
margin-bottom:var(--space-3xl)}

.product-card {
transition:all .3s ease}

.product-image {
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-card) var(--radius-card) 0 0;
height:280px}

.product-image img {
    width:100%;
    height:100%;
    object-fit:contain;
transition:transform .5s ease}

.product-card:hover .product-image img {
transform:scale(1.05)}

.product-badge {
    position:absolute;
    top:var(--space-md);
    right:var(--space-md);
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-full);
    font-size:.75rem;
    font-weight:600;
    background-color:var(--color-white);
box-shadow:var(--shadow-md)}

.badge-bestseller {
    background-color:var(--color-accent);
color:var(--color-secondary)}

.badge-new {
    background-color:var(--color-secondary);
color:var(--color-white)}

.product-name {
margin-bottom:var(--space-sm)}

.product-description {
    color:var(--color-text-light);
margin-bottom:var(--space-lg)}

.product-footer {
    display:flex;
    justify-content:space-between;
align-items:center}

.product-price {
color:var(--color-secondary)}

.section-cta {
text-align:center}

.storytelling-section {
    padding:var(--space-5xl) 0;
background-color:var(--color-white)}

.storytelling-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4xl);
align-items:center}

.storytelling-text p {
margin-bottom:var(--space-lg)}

.storytelling-visual img {
    width:100%;
height:auto;}

.testimonials-section {
    background-color:var(--bg-light);
padding:var(--space-4xl) 0}

.rating-stars {
    color:var(--color-accent);
margin-top:var(--space-sm)}

.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
gap:var(--space-xl)}

.testimonial-card {
padding:var(--space-xl)}

.testimonial-content {
margin-bottom:var(--space-lg)}

.testimonial-author {
    display:flex;
    align-items:center;
gap:var(--space-md)}

.author-avatar {
    width:48px;
    height:48px;
    border-radius:var(--radius-full);
    background-color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
color:var(--color-secondary)}

.author-info {
flex:1}

.testimonial-rating {
color:var(--color-accent)}

.usp-section {
    padding:var(--space-4xl) 0;
background-color:var(--color-white)}

.usp-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
gap:var(--space-3xl)}

.usp-card {
text-align:center}

.usp-visual {
margin-bottom:var(--space-xl)}

.usp-icon-large {
font-size:5rem}

.local-section {
    background-color:var(--bg-light);
padding:var(--space-4xl) 0}

.local-content {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4xl);
align-items:center}

.local-locations {
margin:var(--space-2xl) 0}

.locations-list {
    list-style:none;
padding:0}

.locations-list li {
margin-bottom:var(--space-md)}

.map-placeholder img {
    width:100%;
height:400px}

.blog-section {
    padding:var(--space-4xl) 0;
background-color:var(--color-white)}

.blog-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-xl);
margin-bottom:var(--space-3xl)}

.blog-image {
    height:200px;
    overflow:hidden;
border-radius:var(--radius-card) var(--radius-card) 0 0}

.blog-image img {
    width:100%;
    height:100%;
    object-fit:cover;
transition:transform .5s ease}

.blog-card:hover .blog-image img {
transform:scale(1.05)}

.blog-category {
    display:inline-block;
    padding:var(--space-xs) var(--space-md);
    background-color:var(--color-primary-light);
    border-radius:var(--radius-sm);
    margin-bottom:var(--space-md);
    color:var(--color-secondary);
font-weight:500}

.blog-excerpt {
    color:var(--color-text-light);
margin-bottom:var(--space-md)}

.blog-link {
    color:var(--color-secondary);
    text-decoration:none;
    font-weight:500;
    transition:transform .3s ease;
display:inline-block}

.blog-link:hover {
transform:translateX(5px)}

.conversion-cta {
    background:linear-gradient(135deg,var(--color-secondary) 0,var(--color-secondary-light) 100%);
    color:var(--color-white);
    padding:var(--space-5xl) 0;
text-align:center}

.conversion-cta .h2 {
    color:var(--color-white);
margin-bottom:var(--space-lg)}

.conversion-cta .body-l {
    color:var(--color-primary-light);
margin-bottom:var(--space-2xl)}

.cta-buttons {
    display:flex;
    justify-content:center;
gap:var(--space-lg)}

.newsletter-section {
    background-color:var(--bg-light);
padding:var(--space-4xl) 0}

.newsletter-content {
    display:flex;
    justify-content:space-between;
    align-items:center;
margin-bottom:var(--space-2xl)}

.newsletter-form {
    display:flex;
gap:var(--space-md)}

.newsletter-input {
    padding:var(--space-md) var(--space-lg);
    border:2px solid var(--color-gray);
    border-radius:var(--radius-full);
    font-family:var(--font-secondary);
    min-width:300px;
transition:border-color .3s ease}

.newsletter-input:focus {
    outline:0;
border-color:var(--color-primary)}

.social-links {
    display:flex;
    justify-content:left;
gap:var(--space-xl)}

.social-link {
    color:var(--color-secondary);
    text-decoration:none;
    font-weight:500;
transition:color .3s ease}

.social-link:hover {
color:var(--color-primary-dark)}

.footer {
    background-color:var(--color-secondary);
    color:var(--color-white);
padding:var(--space-4xl) 0 var(--space-2xl)}

.footer-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-3xl);
margin-bottom:var(--space-3xl)}

.footer .h5 {
    color:var(--color-white);
margin-bottom:var(--space-lg)}

.footer-links {
    list-style:none;
    padding:0;
margin:0}

.footer-links li {
margin-bottom:var(--space-md)}

.footer-links a {
    color:var(--color-primary-light);
    text-decoration:none;
transition:color .3s ease}

.footer-links a:hover {
color:var(--color-white)}

.footer-address {
    font-style:normal;
    color:var(--color-primary-light);
line-height:1.8}

.footer-address a {
    color:var(--color-primary-light);
text-decoration:none}

.footer-address a:hover {
color:var(--color-white)}

.footer-bottom {
    border-top:1px solid var(--color-secondary-light);
    padding-top:var(--space-xl);
    text-align:center;
color:var(--color-primary-light)}

@media (max-width:1024px) {
    .hero .container,.local-content,.storytelling-grid {
    grid-template-columns:1fr}

    .blog-grid,.products-grid {
    grid-template-columns:repeat(2,1fr)}

    .footer-grid,.trust-grid {
    grid-template-columns:repeat(2,1fr)}

    .trust-grid {
    gap:var(--space-3xl)}

    .usp-grid {
    grid-template-columns:1fr}

    .hero-visual {
    order:-1}

}

@media (max-width:768px) {
    .blog-grid,.footer-grid,.products-grid,.testimonials-grid,.trust-grid {
    grid-template-columns:1fr}

    .cta-buttons,.hero-cta {
    flex-direction:column}

    .newsletter-content {
        flex-direction:column;
        text-align:center;
    gap:var(--space-xl)}

    .newsletter-form {
        flex-direction:column;
    width:100%}

    .newsletter-input {
    min-width:100%}

}

.shop-hero {
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
padding:var(--space-5xl) 0 var(--space-4xl)}

.hero-content-center {
    text-align:center;
    max-width:700px;
margin:0 auto}

.shop-hero .h1 {
margin-bottom:var(--space-lg)}

.shop-products {
    padding:var(--space-5xl) 0;
background-color:var(--bg-light)}

.shop-products .products-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:var(--space-xl)}

.shop-products .product-card {
    height:100%;
    display:flex;
flex-direction:column}

.shop-products .product-image {
height:280px}

.shop-products .product-shipping {
    display:flex;
    align-items:center;
    gap:var(--space-xs);
    padding:var(--space-md);
    background-color:var(--color-light);
    border-radius:var(--radius-md);
    margin-top:var(--space-md);
    color:var(--color-text-light);
font-size:.875rem}

.shop-products .product-shipping svg {
    color:var(--color-primary);
flex-shrink:0}

.product-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
color:var(--color-primary)}

.product-category {
    color:var(--color-text-light);
    text-transform:uppercase;
    letter-spacing:.05em;
margin-bottom:var(--space-sm)}

.product-actions {
    display:flex;
gap:var(--space-sm)}

.empty-state {
    text-align:center;
padding:var(--space-5xl) var(--space-lg)}

.empty-state-icon {
    color:var(--color-primary);
    opacity:.4;
margin-bottom:var(--space-xl)}

.empty-state .h2 {
margin-bottom:var(--space-lg)}

.empty-state .body-l {
color:var(--color-text-light)}

.shop-guarantees {
    background-color:var(--color-white);
padding:var(--space-4xl) 0}

.guarantees-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
gap:var(--space-3xl)}

.guarantee-item {
text-align:center}

.guarantee-icon {
    color:var(--color-primary);
    margin-bottom:var(--space-lg);
    display:flex;
justify-content:center}

.guarantee-item .h5 {
    margin-bottom:var(--space-md);
color:var(--color-secondary)}

.guarantee-item .body-s {
color:var(--color-text-light)}

.shop-faq {
    background-color:var(--bg-light);
padding:var(--space-5xl) 0}

.faq-header {
    text-align:center;
    max-width:700px;
margin:0 auto var(--space-4xl)}

.faq-header .h2 {
margin-bottom:var(--space-md)}

.faq-header .body-m {
color:var(--color-text-light)}

.faq-content {
    max-width:900px;
margin:0 auto}

.accordion {
    display:flex;
    flex-direction:column;
gap:var(--space-md)}

.accordion-item {
    background-color:var(--color-white);
    border:none;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
transition:box-shadow .3s ease}

.accordion-item:hover {
box-shadow:var(--shadow-md)}

.accordion-header {
margin:0}

.accordion-button {
    background-color:transparent;
    border:none;
    width:100%;
    text-align:left;
    padding:var(--space-lg) var(--space-xl);
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:600;
    color:var(--color-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:var(--space-md);
    transition:all .3s ease;
position:relative}

.accordion-button:hover {
color:var(--color-primary-dark)}

.accordion-button svg {
    flex-shrink:0;
color:var(--color-primary)}

.accordion-button::after {
    content:'';
    position:absolute;
    right:var(--space-xl);
    width:12px;
    height:12px;
    border-right:2px solid var(--color-primary);
    border-bottom:2px solid var(--color-primary);
    transform:rotate(45deg);
transition:transform .3s ease}

.accordion-button:not(.collapsed)::after {
transform:rotate(-135deg)}

.accordion-button:focus {
    outline:2px solid var(--color-primary-light);
outline-offset:-2px}

.accordion-collapse {
transition:height .3s ease}

.accordion-body {
    padding:0 var(--space-xl) var(--space-lg);
    color:var(--color-text);
    line-height:var(--line-height-relaxed);
padding-top:3%}

@media (max-width:1024px) {
    .shop-products .products-grid {
    grid-template-columns:repeat(2,1fr)}

    .guarantees-grid {
        grid-template-columns:1fr;
    gap:var(--space-2xl)}

}

@media (max-width:768px) {
    .shop-hero {
    padding:var(--space-4xl) 0 var(--space-3xl)}

    .shop-hero .h1 {
    font-size:2.5rem}

    .shop-faq,.shop-guarantees,.shop-products {
    padding:var(--space-3xl) 0}

    .shop-products .products-grid {
        grid-template-columns:1fr;
    gap:var(--space-lg)}

    .accordion-button {
        padding:var(--space-md) var(--space-lg);
    font-size:.9375rem}

    .accordion-button::after {
    right:var(--space-lg)}

    .accordion-body {
        padding:0 var(--space-lg) var(--space-md);
        font-size:.9375rem;
    padding-top:3%}

}

@media (max-width:480px) {
    .shop-hero .h1 {
    font-size:2rem}

    .product-footer {
        flex-direction:column;
        gap:var(--space-md);
    align-items:stretch}

    .product-actions {
    width:100%}

    .product-actions .btn {
    flex:1}

}

.blog-hero {
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
padding:var(--space-5xl) 0 var(--space-4xl)}

.blog-hero .h1 {
margin-bottom:var(--space-lg)}

.blog-articles-section {
    padding:var(--space-5xl) 0;
background-color:var(--color-white)}

.blog-empty-state {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:400px;
padding:var(--space-5xl) var(--space-lg)}

.empty-state-content {
    max-width:500px;
text-align:center}

.empty-state-description {
    color:var(--color-text-light);
margin-bottom:var(--space-2xl)}

.blog-card {
    transition:all .3s ease;
    height:100%;
    display:flex;
flex-direction:column}

.blog-card:hover {
    transform:translateY(-8px);
box-shadow:var(--shadow-card-hover)}

.blog-card .card-body {
    padding:var(--space-xl);
    display:flex;
    flex-direction:column;
flex:1}

.blog-image-placeholder {
background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%)}

.blog-image-placeholder svg {
    color:var(--color-primary);
opacity:.4}

.blog-title {
    margin-bottom:var(--space-md);
    transition:color .3s ease;
line-height:var(--line-height-normal)}

.blog-link:hover .blog-title {
color:var(--color-primary-dark)}

.blog-meta {
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    margin-bottom:var(--space-lg);
color:var(--color-text-light)}

.blog-meta-item {
    display:flex;
    align-items:center;
gap:var(--space-xs)}

.blog-meta-separator {
color:var(--color-gray)}

.blog-cta {
    color:var(--color-secondary);
    font-weight:500;
    font-size:.9375rem;
    display:inline-flex;
    align-items:center;
    gap:var(--space-xs);
transition:all .3s ease}

.blog-link:hover .blog-cta {
    color:var(--color-primary-dark);
transform:translateX(4px)}

.services-hero {
    background: var(--bg-dark);
padding:var(--space-5xl) 0 var(--space-4xl)}

.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4xl);
align-items:center}

.hero-content {
max-width:100%}

.hero-title-highlight {
color:var(--color-primary-dark)}

.hero-actions {
    display:flex;
    gap:var(--space-lg);
flex-wrap:wrap}

.hero-visual {
    display:flex;
    justify-content:center;
align-items:center}

.hero-illustration {
    width:300px;
    height:300px;
    background-color:var(--color-white);
    border-radius:var(--radius-2xl);
    box-shadow:var(--shadow-2xl);
    display:flex;
    align-items:center;
    justify-content:center;
color:var(--color-primary)}

.services-expertise {
    padding:var(--space-5xl) 0;
background-color:var(--color-white)}

.section-badge {
    display:inline-block;
margin-bottom:var(--space-lg)}

.section-description {
color:var(--color-text-light)}

.expertise-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
gap:var(--space-xl)}

.expertise-card {
transition:all .3s ease}

.expertise-card:hover {
    transform:translateY(-8px);
box-shadow:var(--shadow-card-hover)}

.expertise-card .card-body {
    padding:var(--space-xl);
text-align:center}

.expertise-icon {
    width:80px;
    height:80px;
    border-radius:var(--radius-full);
    display:inline-flex;
    align-items:center;
    justify-content:center;
margin-bottom:var(--space-lg)}

.icon-primary {
    background-color:rgba(201,184,163,.15);
color:var(--color-primary)}

.icon-success {
    background-color:rgba(76,175,80,.15);
color:#4caf50}

.icon-warning {
    background-color:rgba(232,180,75,.15);
color:var(--color-accent-yellow)}

.icon-info {
    background-color:rgba(33,150,243,.15);
color:#2196f3}

.icon-danger {
    background-color:rgba(244,67,54,.15);
color:#f44336}

.icon-secondary {
    background-color:rgba(26,26,26,.1);
color:var(--color-secondary)}

.expertise-title {
margin-bottom:var(--space-md)}

.expertise-text {
    color:var(--color-text-light);
line-height:var(--line-height-relaxed)}

.services-offers {
    padding:var(--space-5xl) 0;
background-color:var(--bg-light)}

.offers-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
gap:var(--space-xl)}

.offer-card {
    display:flex;
    flex-direction:column;
transition:all .3s ease}

.offer-card:hover {
    transform:translateY(-8px);
box-shadow:var(--shadow-xl)}

.card-featured {
    position:relative;
box-shadow:var(--shadow-lg)}

.offer-badge {
    position:absolute;
    top:var(--space-lg);
    right:var(--space-lg);
    background-color:var(--color-accent);
    color:var(--color-secondary);
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-full);
    font-size:.75rem;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:var(--space-xs);
z-index:10}

.offer-header {
    padding:var(--space-2xl);
    text-align:center;
    color:var(--color-white);
    display:flex;
    flex-direction:column;
    align-items:center;
gap:var(--space-md)}

.header-primary {
background:var(--color-primary-dark)}

.header-dark {
background:var(--color-primary-dark)}

.header-success {
background:var(--color-primary-dark)}

.offer-header .h4 {
    margin:0;
color:var(--color-white)}

.offer-card .card-body {
    padding:var(--space-xl);
flex:1}

.offer-list {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
gap:var(--space-md)}

.offer-list li {
    display:flex;
    align-items:flex-start;
    gap:var(--space-sm);
    color:var(--color-text);
font-size:.9375rem}

.offer-list li svg {
    flex-shrink:0;
    color:#4caf50;
margin-top:2px}

.offer-card .card-footer {
    padding:var(--space-xl);
    background-color:transparent;
border-top:1px solid var(--color-gray)}

.btn-block {
    width:100%;
display:block}

.btn-success-outline {
    background-color:transparent;
    color:var( --color-primary-dark);
border:2px solid var(--color-primary-dark)}

.btn-success-outline:hover {
    background-color:#4caf50;
color:var(--color-white)}

.services-why {
    padding:var(--space-5xl) 0;
background-color:var(--color-white)}

.why-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4xl);
align-items:center}

.why-features {
    display:grid;
    grid-template-columns:repeat(2,1fr);
gap:var(--space-lg)}

.why-feature {
    display:flex;
gap:var(--space-md)}

.feature-icon {
    width:48px;
    height:48px;
    border-radius:var(--radius-md);
    display:flex;
    align-items:center;
    justify-content:center;
flex-shrink:0}

.why-stats {
    display:grid;
    grid-template-columns:repeat(2,1fr);
gap:var(--space-lg)}

.stat-box {
        background-color: var(--color-primary-light);
    padding:var(--space-2xl);
    border-radius:var(--radius-xl);
    text-align:center;
transition:all .3s ease}

.stat-box:hover {
    background-color:var(--color-primary-light);
transform:scale(1.05)}

.stat-value {
    font-size:3rem;
    font-weight:700;
    color:var(--color-primary-dark);
    margin-bottom:var(--space-sm);
line-height:1}

.stat-label {
    color:var(--color-text-light);
    font-size:.875rem;
margin:0}

.services-cta {
    background:linear-gradient(135deg,var(--color-secondary) 0,var(--color-secondary-light) 100%);
padding:var(--space-5xl) 0}

.services-cta .cta-content {
    text-align:center;
    max-width:800px;
margin:0 auto}

.services-cta .h2 {
    color:var(--color-white);
margin-bottom:var(--space-lg)}

.services-cta .body-l {
    color:rgba(255,255,255,.85);
margin-bottom:var(--space-2xl)}

.services-faq {
    padding:var(--space-5xl) 0;
background-color:var(--bg-light)}

.faq-wrapper {
    max-width:900px;
margin:0 auto}

.cancel-page {
    padding:var(--space-3xl) 0;
min-height:70vh}

.cancel-wrapper {
    max-width:700px;
margin:0 auto}

.cancel-card {
    background-color:var(--color-white);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    padding:var(--space-3xl);
text-align:center}

.cancel-icon {
    margin:0 auto var(--space-xl);
    width:120px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#fff9e6 0,#ffe0b2 100%);
    border-radius:50%;
    color:#ffa000;
animation:scaleIn .5s ease-out}

.cancel-title {
    font-family:var(--font-primary);
    font-size:2rem;
    font-weight:700;
    color:var(--color-secondary);
margin-bottom:var(--space-md)}

.cancel-message {
    font-size:1rem;
    color:var(--color-text);
    line-height:1.75;
margin-bottom:var(--space-xl)}

.cancel-section {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
    margin-bottom:var(--space-lg);
text-align:left}

.reason-list {
    list-style:none;
    padding:0;
margin:0}

.reason-list li {
    display:flex;
    align-items:flex-start;
    gap:var(--space-md);
    padding:var(--space-md) 0;
    color:var(--color-text-light);
font-size:.9375rem}

.reason-list li svg {
    flex-shrink:0;
    color:#ffa000;
margin-top:.125rem}

.cancel-alert {
    background:linear-gradient(135deg,#e3f2fd 0,#bbdefb 100%);
    border-left:4px solid #2196f3;
    border-radius:var(--radius-lg);
    padding:var(--space-lg);
    display:flex;
    align-items:flex-start;
    gap:var(--space-md);
    margin-bottom:var(--space-xl);
text-align:left}

.cancel-alert svg {
    flex-shrink:0;
color:#1976d2}

.cancel-alert p {
    margin:0;
    color:var(--color-text);
font-size:.9375rem}

.cancel-actions {
    display:flex;
    flex-direction:column;
gap:var(--space-md)}

.cancel-contact {
    text-align:center;
margin-top:var(--space-xl)}

.cancel-contact p {
    font-size:.875rem;
color:var(--color-text-light)}

.cancel-contact a {
    color:var(--color-primary);
    text-decoration:none;
font-weight:600}

.cancel-contact a:hover {
text-decoration:underline}

@media (max-width:1024px) {
    .blog-grid {
    grid-template-columns:repeat(2,1fr)}

    .hero-grid,.why-grid {
    grid-template-columns:1fr}

    .expertise-grid,.offers-grid {
    grid-template-columns:repeat(2,1fr)}

    .why-features {
    grid-template-columns:1fr}

    .hero-visual {
    order:-1}

    .hero-illustration {
        width:250px;
    height:250px}

}

@media (max-width:768px) {
    .blog-hero,.services-hero {
    padding:var(--space-4xl) 0 var(--space-3xl)}

    .blog-hero .h1,.services-hero .h1 {
    font-size:2.5rem}

    .blog-articles-section {
    padding:var(--space-3xl) 0}

    .blog-grid {
        grid-template-columns:1fr;
    gap:var(--space-lg)}

    .blog-image {
    height:200px}

    .blog-card .card-body {
    padding:var(--space-lg)}

    .blog-empty-state {
        min-height:300px;
    padding:var(--space-3xl) var(--space-md)}

    .hero-actions {
    flex-direction:column}

    .services-cta,.services-expertise,.services-faq,.services-offers,.services-why {
    padding:var(--space-3xl) 0}

    .expertise-grid,.offers-grid {
        grid-template-columns:1fr;
    gap:var(--space-lg)}

    .why-stats {
    grid-template-columns:repeat(2,1fr)}

    .cancel-card {
    padding:var(--space-xl)}

    .cancel-title {
    font-size:1.75rem}

    .cancel-icon {
        width:100px;
    height:100px}

}

@media (max-width:480px) {
    .blog-hero .h1,.services-hero .h1 {
    font-size:2rem}

    .blog-card .card-body {
    padding:var(--space-md)}

    .blog-meta {
    flex-wrap:wrap}

    .hero-illustration {
        width:200px;
    height:200px}

    .expertise-icon,.feature-icon {
        width:64px;
    height:64px}

    .stat-value {
    font-size:2rem}

    .why-stats {
    grid-template-columns:1fr}

    .cancel-page {
    padding:var(--space-xl) 0}

    .cancel-card {
    padding:var(--space-lg)}

    .cancel-title {
    font-size:1.5rem}

}

.legal-hero,.privacy-hero {
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
    padding:var(--space-4xl) 0 var(--space-3xl);
border-bottom:3px solid var(--color-primary)}

.legal-hero .hero-content,.privacy-hero .hero-content {
    text-align:center;
    max-width:800px;
margin:0 auto}

.legal-hero .h1,.privacy-hero .h1 {
    font-family:var(--font-primary);
    font-size:3.5rem;
    font-weight:700;
    color:var(--color-secondary);
margin-bottom:var(--space-md)}

.legal-hero .lead,.privacy-hero .lead {
    font-size:1.125rem;
    color:var(--color-text-light);
margin-bottom:var(--space-lg)}

.update-date {
    display:inline-flex;
    align-items:center;
    gap:var(--space-sm);
    font-size:.875rem;
color:var(--color-text-light)}

.update-date svg {
color:var(--color-primary)}

.legal-content,.privacy-content {
padding:var(--space-4xl) 0}

.legal-grid,.privacy-grid {
    display:grid;
    grid-template-columns:280px 1fr;
gap:var(--space-3xl)}

.legal-sidebar,.privacy-sidebar {
    position:sticky;
    top:100px;
align-self:start}

.toc {
    background-color:var(--color-white);
    border:1px solid var(--color-gray);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
box-shadow:var(--shadow-sm)}

.toc-title {
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:700;
    color:var(--color-secondary);
margin-bottom:var(--space-md)}

.toc-list {
    list-style:none;
    padding:0;
margin:0}

.toc-list li {
margin-bottom:var(--space-sm)}

.toc-list a {
    display:block;
    padding:var(--space-sm) var(--space-md);
    color:var(--color-text);
    text-decoration:none;
    border-radius:var(--radius-md);
    font-size:.9375rem;
transition:all .2s ease}

.toc-list a:hover {
    background-color:var(--color-light);
color:var(--color-primary)}

.legal-section,.privacy-section {
    background-color:var(--color-white);
    border:1px solid var(--color-gray);
    border-radius:var(--radius-lg);
    padding:var(--space-2xl);
    margin-bottom:var(--space-xl);
box-shadow:var(--shadow-sm)}

.legal-section .h2,.privacy-section .h2 {
    font-family:var(--font-primary);
    font-size:1.75rem;
    font-weight:700;
    color:var(--color-secondary);
    margin-bottom:var(--space-xl);
    padding-bottom:var(--space-md);
    border-bottom:2px solid var(--color-primary-light);
    display:flex;
    align-items:center;
gap:var(--space-md)}

.legal-section .h2 svg,.privacy-section .h2 svg {
color:var(--color-primary)}

.legal-section h3,.privacy-section h3 {
    font-family:var(--font-primary);
    font-size:1.25rem;
    font-weight:600;
    color:var(--color-secondary);
margin:var(--space-xl) 0 var(--space-md)}

.legal-section h4,.privacy-section h4 {
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:600;
    color:var(--color-secondary);
margin:var(--space-lg) 0 var(--space-sm)}

.legal-section p,.privacy-section p {
    line-height:1.75;
    margin-bottom:var(--space-md);
color:var(--color-text)}

.legal-section ol,.legal-section ul,.privacy-section ol,.privacy-section ul {
    margin:var(--space-md) 0;
padding-left:var(--space-xl)}

.legal-section li,.privacy-section li {
    margin-bottom:var(--space-sm);
    line-height:1.75;
color:var(--color-text)}

.legal-section a,.privacy-section a {
    color:var(--color-primary-dark);
    text-decoration:none;
font-weight:600}

.legal-section a:hover,.privacy-section a:hover {
text-decoration:underline}

.info-box {
    background-color:var(--color-light);
    border-left:4px solid var(--color-primary);
    border-radius:var(--radius-md);
    padding:var(--space-lg);
margin:var(--space-lg) 0}

.info-box p {
margin-bottom:var(--space-sm)}

.info-box p:last-child {
margin-bottom:0}

.warning-box {
    display:flex;
    gap:var(--space-md);
    padding:var(--space-lg);
    background:linear-gradient(135deg,#fff3cd 0,#fff9e6 100%);
    border-left:4px solid #ffc107;
    border-radius:var(--radius-md);
margin:var(--space-lg) 0}

.warning-box svg {
    flex-shrink:0;
color:#ffa000}

.warning-box div {
flex:1}

.warning-box p {
margin:var(--space-sm) 0 0}

.warning-box ul {
    margin:var(--space-sm) 0 0;
padding-left:var(--space-xl)}

.highlight-box {
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
margin:var(--space-lg) 0}

.highlight-box h3,.highlight-box h4 {
margin-top:0}

.data-table {
    display:flex;
    flex-direction:column;
    gap:1px;
    background-color:var(--color-gray);
    border-radius:var(--radius-lg);
    overflow:hidden;
margin:var(--space-lg) 0}

.data-table .table-row {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:1px;
background-color:var(--color-white)}

.data-table .table-header {
    background:var(--color-primary-dark);
    font-family:var(--font-primary);
    font-weight:600;
color:var(--color-white)}

.data-table .table-row>div {
padding:var(--space-md)}

.badge-required {
    background-color:#fee2e2;
color:#dc2626}

.badge-auto {
    background-color:#e0e7ff;
color:#4f46e5}

.purpose-list {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-lg);
margin:var(--space-lg) 0}

.purpose-item {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    padding:var(--space-lg);
border-left:4px solid var(--color-primary)}

.purpose-item h3 {
    margin:0 0 var(--space-sm);
font-size:1rem}

.purpose-item p {
    margin:0;
    font-size:.9375rem;
color:var(--color-text-light)}

.rights-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-md);
margin:var(--space-lg) 0}

.right-card {
    background-color:var(--color-light);
    border-radius:var(--radius-md);
    padding:var(--space-lg);
    text-align:center;
transition:all .3s ease}

.right-card:hover {
    background:linear-gradient(135deg,var(--color-primary-light) 0,var(--color-primary) 100%);
    transform:translateY(-4px);
box-shadow:var(--shadow-md)}

.right-card h3 {
    margin:0 0 var(--space-sm);
    font-size:1rem;
color:var(--color-secondary)}

.right-card p {
    margin:0;
    font-size:.875rem;
color:var(--color-text-light)}

.version-info {
    text-align:center;
    margin-top:var(--space-2xl);
    padding-top:var(--space-xl);
border-top:2px solid var(--color-gray)}

.version-info small {
color:var(--color-text-light)}

.cgv-page {
padding:var(--space-4xl) 0}

.cgv-wrapper {
    max-width:900px;
margin:0 auto}

.cgv-header {
    text-align:center;
margin-bottom:var(--space-4xl)}

.cgv-header .h1 {
    font-family:var(--font-primary);
    font-size:3.5rem;
    font-weight:700;
    color:var(--color-secondary);
margin-bottom:var(--space-lg)}

.cgv-header .lead {
    font-size:1.125rem;
    color:var(--color-text-light);
margin-bottom:var(--space-md)}

.cgv-section {
    background-color:var(--color-white);
    border:1px solid var(--color-gray);
    border-radius:var(--radius-xl);
    padding:var(--space-2xl);
    margin-bottom:var(--space-xl);
box-shadow:var(--shadow-sm)}

.cgv-section .h2 {
    font-family:var(--font-primary);
    font-size:1.75rem;
    font-weight:700;
    color:var(--color-secondary);
    margin-bottom:var(--space-xl);
    padding-bottom:var(--space-md);
    border-bottom:2px solid var(--color-primary);
    display:flex;
    align-items:center;
gap:var(--space-md)}

.cgv-section .h2 svg {
color:var(--color-primary)}

.cgv-section h3 {
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:600;
    color:var(--color-secondary);
margin:var(--space-lg) 0 var(--space-md)}

.cgv-section p {
    line-height:1.75;
    margin-bottom:var(--space-md);
color:var(--color-text)}

.cgv-section ol,.cgv-section ul {
    margin:var(--space-md) 0;
padding-left:var(--space-xl)}

.cgv-section li {
    margin-bottom:.5rem;
    line-height:1.75;
color:var(--color-text)}

.cgv-section a {
    color:var(--color-primary-dark);
    text-decoration:none;
font-weight:600}

.cgv-section a:hover {
text-decoration:underline}

.payment-methods {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-md);
margin:var(--space-lg) 0}

.payment-card {
    background-color:var(--color-light);
    border-radius:var(--radius-md);
    padding:var(--space-lg);
text-align:center}

.payment-card svg {
    color:var(--color-primary);
margin-bottom:var(--space-md)}

.payment-card p {
    margin:0;
    font-weight:600;
color:var(--color-secondary)}

.info-table {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    overflow:hidden;
margin:var(--space-lg) 0}

.info-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:var(--space-lg);
border-bottom:1px solid var(--color-gray)}

.info-row:last-child {
border-bottom:none}

.info-label {
    font-weight:600;
color:var(--color-secondary)}

.info-value {
color:var(--color-text)}

.contact-info,.legal-contact-info {
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
margin-top:var(--space-lg)}

.contact-item {
    display:flex;
    gap:var(--space-md);
    padding:var(--space-lg);
    background-color:var(--color-light);
border-radius:var(--radius-md)}

.contact-item svg {
    flex-shrink:0;
color:var(--color-primary)}

.contact-item div {
    display:flex;
    flex-direction:column;
gap:.25rem}

.contact-item strong {
    font-family:var(--font-primary);
    color:var(--color-secondary);
font-size:.875rem}

.contact-item a {
    color:var(--color-primary);
    text-decoration:none;
font-weight:600}

.contact-item a:hover {
text-decoration:underline}

.shipping-page {
padding:var(--space-4xl) 0}

.shipping-wrapper {
    max-width:900px;
margin:0 auto}

.shipping-header {
    text-align:center;
margin-bottom:var(--space-4xl)}

.shipping-header .h1 {
    font-family:var(--font-primary);
    font-size:3.5rem;
    font-weight:700;
    color:var(--color-secondary);
margin-bottom:var(--space-lg)}

.shipping-header .lead {
    font-size:1.125rem;
    color:var(--color-text-light);
    line-height:1.75;
    max-width:700px;
margin:0 auto}

.shipping-content {
    display:flex;
    flex-direction:column;
gap:var(--space-3xl)}

.shipping-section {
    background-color:var(--color-white);
    border-radius:var(--radius-xl);
    padding:var(--space-2xl);
box-shadow:var(--shadow-md)}

.shipping-section .h2 {
    font-family:var(--font-primary);
    font-size:1.75rem;
    font-weight:700;
    color:var(--color-secondary);
    margin-bottom:var(--space-lg);
    display:flex;
    align-items:center;
gap:var(--space-md)}

.shipping-section .h2 svg {
color:var(--color-primary)}

.shipping-section p {
    font-size:1rem;
    line-height:1.75;
    color:var(--color-text);
margin-bottom:var(--space-lg)}

.shipping-table {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    overflow:hidden;
margin-bottom:var(--space-lg)}

.shipping-table .table-header {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:var(--space-md);
    padding:var(--space-lg);
    background:var(--color-primary-dark);
    color:var(--color-white);
    font-family:var(--font-primary);
font-weight:600}

.shipping-table .table-row {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:var(--space-md);
    padding:var(--space-lg);
border-bottom:1px solid rgba(201,184,163,.2)}

.shipping-table .table-row:last-child {
border-bottom:none}

.table-cell {
    display:flex;
flex-direction:column}

.cell-desc {
    font-size:.875rem;
    color:var(--color-text-light);
margin-top:.25rem}

.cell-value {
    font-weight:600;
color:var(--color-secondary)}

.cell-price {
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:700;
color:var(--color-secondary)}

.cell-free {
color:var(--color-success)}

.shipping-note {
    display:flex;
    gap:var(--space-md);
    padding:var(--space-lg);
    background:linear-gradient(135deg,#fff3cd 0,#fff9e6 100%);
    border-left:4px solid #ffc107;
border-radius:var(--radius-md)}

.shipping-note svg {
    flex-shrink:0;
color:#ffa000}

.shipping-note p {
    margin:0;
    font-size:.9375rem;
color:var(--color-text)}

.shipping-steps {
    display:grid;
    grid-template-columns:repeat(2,1fr);
gap:var(--space-lg)}

.step-item {
    display:flex;
gap:var(--space-md)}

.step-icon {
    flex-shrink:0;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--color-primary-dark);
    color:var(--color-white);
    border-radius:50%;
    font-family:var(--font-primary);
    font-size:1.25rem;
font-weight:700}

.step-content h3 {
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:600;
    color:var(--color-secondary);
margin:0 0 .25rem}

.step-content p {
    font-size:.875rem;
    color:var(--color-text-light);
margin:0}

.shipping-highlight {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
margin-top:var(--space-lg)}

.shipping-highlight h3 {
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:600;
    color:var(--color-secondary);
margin-bottom:var(--space-md)}

.shipping-highlight ol {
    margin:0;
padding-left:var(--space-xl)}

.shipping-highlight li {
    margin-bottom:var(--space-sm);
    color:var(--color-text);
line-height:1.75}

.shipping-highlight a {
    color:var(--color-primary);
    text-decoration:none;
font-weight:600}

.shipping-highlight a:hover {
text-decoration:underline}

@media (max-width:1024px) {
    .legal-grid,.privacy-grid {
    grid-template-columns:1fr}

    .legal-sidebar,.privacy-sidebar {
    position:static}

}

@media (max-width:768px) {
    .cgv-header .h1,.legal-hero .h1,.privacy-hero .h1,.shipping-header .h1 {
    font-size:2.5rem}

    .cgv-section,.legal-section,.privacy-section,.shipping-section {
    padding:var(--space-xl)}

    .payment-methods {
    grid-template-columns:1fr}

    .data-table .table-row {
    grid-template-columns:1fr}

    .purpose-list {
    grid-template-columns:1fr}

    .rights-grid {
    grid-template-columns:repeat(2,1fr)}

    .shipping-table .table-header,.shipping-table .table-row {
        grid-template-columns:1fr;
    gap:var(--space-sm)}

    .shipping-table .table-header .table-cell:not(:first-child) {
    display:none}

    .shipping-steps {
    grid-template-columns:1fr}

}

@media (max-width:480px) {
    .legal-hero,.privacy-hero {
    padding:var(--space-2xl) 0 var(--space-xl)}

    .cgv-header .h1,.legal-hero .h1,.privacy-hero .h1,.shipping-header .h1 {
    font-size:2rem}

    .legal-content,.privacy-content {
    padding:var(--space-xl) 0}

    .cgv-section,.legal-section,.privacy-section {
    padding:var(--space-lg)}

    .cgv-page,.shipping-page {
    padding:var(--space-xl) 0}

    .shipping-section {
    padding:var(--space-lg)}

    .rights-grid {
    grid-template-columns:1fr}

}

.product-page {
    font-family:var(--font-secondary);
    color:var(--color-text);
padding-top:0}

.product-page .py-5:first-of-type {
    padding-top:var(--space-4xl)!important;
padding-bottom:var(--space-4xl)!important}

.product-page figure img {
    border-radius:var(--radius-2xl)!important;
box-shadow:var(--shadow-xl)!important}

.product-page .badge.bg-warning {
    background-color:var(--color-primary-dark)!important;
    color:var(--color-primary-light)!important;
    border-radius:var(--radius-md)!important;
    padding:var(--space-xs) var(--space-md)!important;
    font-size:.75rem!important;
font-weight:600!important}

.product-page .badge.bg-success {
    background-color:var(--color-success)!important;
    border-radius:var(--radius-md)!important;
    padding:var(--space-xs) var(--space-md)!important;
    font-size:.75rem!important;
font-weight:600!important}

.product-page header .text-warning {
    color:var(--color-primary-dark)!important;
    font-family:var(--font-primary);
    font-size:.75rem;
    font-weight:600;
letter-spacing:.05em}

.product-page header .text-success {
    color:var(--color-success)!important;
    font-family:var(--font-primary);
    font-size:.75rem;
    font-weight:600;
letter-spacing:.05em}

.product-page h1.display-5 {
    font-family:var(--font-primary);
    font-size:3rem;
    font-weight:700;
    line-height:1.2;
color:var(--color-secondary)!important}

.product-page .lead {
    font-size:1.125rem;
    line-height:1.75;
color:var(--color-white)!important}

.product-page .h6.text-uppercase {
    font-family:var(--font-primary);
    color:var(--color-text-light)!important;
    font-size:.875rem;
    font-weight:600;
letter-spacing:.05em}

.product-page .badge.bg-light {
    background-color:var(--color-light)!important;
    color:var(--color-secondary)!important;
    border:1px solid var(--color-gray)!important;
    border-radius:999px!important;
    padding:var(--space-sm) var(--space-lg)!important;
    font-size:.875rem;
font-weight:500}

.product-page .list-unstyled li {
    color:var(--color-text);
    font-size:.9375rem;
line-height:1.75}

.product-page .bi-check-circle-fill {
color:var(--color-success)!important}

.product-page .bg-light.rounded.p-4 {
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%)!important;
border-radius:var(--radius-xl)!important}

.product-page .h2.text-primary {
    color:var(--color-secondary)!important;
font-family:var(--font-primary)}

.product-page .btn-primary {
    background-color:var(--color-secondary)!important;
    border-color:var(--color-secondary)!important;
    color:var(--color-white)!important;
    font-family:var(--font-primary);
    font-weight:600;
    padding:var(--space-md) var(--space-2xl)!important;
    border-radius:var(--radius-md)!important;
transition:all .3s ease}

.product-page .btn-primary:hover {
    background-color:var(--color-secondary-light)!important;
    border-color:var(--color-secondary-light)!important;
    transform:translateY(-2px);
box-shadow:var(--shadow-md)!important}

.product-page .small.text-muted {
color:var(--color-text-light)!important}

.product-page .row.g-3.small {
    padding-top:var(--space-lg);
border-top:1px solid var(--color-gray)}

.product-page .bi-arrow-repeat,.product-page .bi-lightning-charge,.product-page .bi-shield-check,.product-page .bi-truck.text-warning {
color:var(--color-primary-dark)!important}

.product-page .py-5.bg-light {
    background-color:var(--color-light)!important;
    padding-top:var(--space-5xl)!important;
padding-bottom:var(--space-5xl)!important}

.product-page .h2.fw-bold {
    font-family:var(--font-primary);
    font-size:2.5rem;
    font-weight:700;
color:var(--color-secondary)!important}

.product-page .bg-white.rounded.shadow-sm {
    background-color:var(--color-white)!important;
    border-radius:var(--radius-xl)!important;
box-shadow:var(--shadow-lg)!important}

.product-page .bg-white.rounded p {
    line-height:1.75;
margin-bottom:var(--space-lg)}

.product-page .py-5.bg-primary {
    background:linear-gradient(135deg,var(--color-secondary) 0,var(--color-secondary-light) 100%)!important;
    padding-top:var(--space-5xl)!important;
padding-bottom:var(--space-5xl)!important}

.product-page .py-5.bg-primary .h2 {
    color:var(--color-white)!important;
font-family:var(--font-primary)}

.product-page .btn-light {
    background-color:var(--color-white)!important;
    border-color:var(--color-white)!important;
    color:var(--color-secondary)!important;
    font-family:var(--font-primary);
    font-weight:600;
    padding:var(--space-md) var(--space-2xl)!important;
    border-radius:var(--radius-md)!important;
transition:all .3s ease}

.product-page .btn-light:hover {
    background-color:var(--color-primary)!important;
    border-color:var(--color-primary)!important;
    color:var(--color-secondary)!important;
    transform:translateY(-2px);
box-shadow:var(--shadow-md)!important}

.product-page .accordion-button:not(.collapsed) {
    background-color:rgba(201,184,163,.15);
color:var(--color-primary-dark)}

.bg-primary {
background-color:var(--color-secondary)!important}

.border-primary {
border-color:var(--color-secondary)!important}

@media (max-width:992px) {
    .product-page .py-5.bg-light,.product-page .py-5.bg-primary,.product-page .py-5:first-of-type {
        padding-top:var(--space-3xl)!important;
    padding-bottom:var(--space-3xl)!important}

    .product-page h1.display-5 {
    font-size:2.5rem}

}

@media (max-width:768px) {
    .product-page h1.display-5 {
    font-size:2rem}

    .product-page .h2.fw-bold {
    font-size:2rem}

    .product-page .btn-light,.product-page .btn-primary {
    width:100%}

}

@media (max-width:576px) {
    .product-page h1.display-5 {
    font-size:1.75rem}

}

.article-page {
    background-color:var(--color-white);
    padding-bottom:var(--space-5xl);
min-height:100vh}

.article-header {
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
    padding:var(--space-4xl) 0 var(--space-3xl);
    margin-bottom:var(--space-2xl);
    position:relative;
overflow:hidden}

.article-header::before {
    content:'';
    position:absolute;
    top:-50%;
    right:-10%;
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(201,184,163,.15) 0,transparent 70%);
    border-radius:50%;
pointer-events:none}

.article-header::after {
    content:'';
    position:absolute;
    bottom:-30%;
    left:-5%;
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(201,184,163,.1) 0,transparent 70%);
    border-radius:50%;
pointer-events:none}

.article-header .container {
    position:relative;
z-index:1}

.article-header h1,.article-title {
    font-family:var(--font-primary);
    font-size:3rem;
    font-weight:700;
    line-height:1.15;
    color:var(--color-secondary);
margin-bottom:var(--space-xl)}

.article-meta {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:var(--space-md);
    color:var(--color-text-light);
font-size:.95rem}

.article-meta-item {
    display:flex;
    align-items:center;
    gap:var(--space-xs);
font-size:.9375rem}

.article-meta i,.article-meta-item svg {
color:var(--color-primary)}

.article-meta-separator {
color:var(--color-gray)}

.article-meta .badge {
    font-weight:500;
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-full);
    transition:all .3s ease;
box-shadow:var(--shadow-sm)}

.article-meta .badge:hover {
    transform:translateY(-2px);
box-shadow:var(--shadow-md)}

.article-tags {
    display:flex;
gap:var(--space-sm)}

.article-tag {
    padding:var(--space-xs) var(--space-md);
    background-color:var(--color-primary);
    color:var(--color-secondary);
    font-size:.75rem;
    font-weight:600;
    border-radius:var(--radius-full);
    text-transform:uppercase;
letter-spacing:.05em}

.article-tag.tag-secondary {
    background-color:var(--color-secondary);
color:var(--color-white)}

.article-content {
    font-family:var(--font-secondary);
    font-size:1.0625rem;
    line-height:var(--line-height-relaxed);
color:var(--color-text)}

.article-content p {
margin-bottom:var(--space-lg)}

.article-lead {
    font-size:1.25rem;
    line-height:var(--line-height-relaxed);
    color:var(--color-text);
    margin-bottom:var(--space-3xl);
font-weight:400}

.article-section {
margin-bottom:var(--space-4xl)}

.article-section .h2 {
    font-family:var(--font-primary);
    font-size:2rem;
    font-weight:700;
    margin-top:var(--space-3xl);
    margin-bottom:var(--space-xl);
color:var(--color-secondary)}

.article-section .h3 {
    font-family:var(--font-primary);
    font-size:1.5rem;
    font-weight:600;
    margin-top:var(--space-2xl);
    margin-bottom:var(--space-lg);
color:var(--color-secondary)}

.article-section .h4 {
    font-family:var(--font-primary);
    font-size:1.25rem;
    font-weight:600;
    margin-top:var(--space-xl);
    margin-bottom:var(--space-md);
color:var(--color-secondary)}

.article-image {
    margin:var(--space-2xl) 0;
    border-radius:var(--radius-lg);
    overflow:hidden;
box-shadow:var(--shadow-lg)}

.article-image img {
    width:100%;
    height:auto;
display:block}

.article-image-caption {
    padding:var(--space-md);
    background-color:var(--color-light);
    font-size:.875rem;
    color:var(--color-text-light);
text-align:center}

.article-content ol,.article-content ul {
    margin:var(--space-lg) 0;
padding-left:var(--space-xl)}

.article-content li {
    margin-bottom:var(--space-sm);
line-height:var(--line-height-relaxed)}

.article-content blockquote {
    background-color:var(--color-light);
    border-left:4px solid var(--color-primary);
    padding:var(--space-xl);
    margin:var(--space-2xl) 0;
    border-radius:var(--radius-md);
font-style:italic}

.article-content blockquote p:last-child {
margin-bottom:0}

.article-info-box {
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
margin:var(--space-2xl) 0}

.article-info-box h4 {
    margin-top:0;
color:var(--color-secondary)}

.article-warning-box {
    background:linear-gradient(135deg,#fff3cd 0,#fff9e6 100%);
    border-left:4px solid #ffc107;
    border-radius:var(--radius-md);
    padding:var(--space-xl);
margin:var(--space-2xl) 0}

.article-toc {
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
margin-bottom:var(--space-3xl)}

.article-toc h3 {
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:700;
    color:var(--color-secondary);
margin-bottom:var(--space-md)}

.article-toc ul {
    list-style:none;
    padding:0;
margin:0}

.article-toc li {
margin-bottom:var(--space-sm)}

.article-toc a {
    color:var(--color-text);
    text-decoration:none;
transition:color .2s ease}

.article-toc a:hover {
color:var(--color-primary)}

.article-cta {
    background:linear-gradient(135deg,var(--color-secondary) 0,var(--color-secondary-light) 100%);
    border-radius:var(--radius-xl);
    padding:var(--space-3xl);
    text-align:center;
margin:var(--space-4xl) 0}

.article-cta h3 {
    color:var(--color-white);
margin-bottom:var(--space-md)}

.article-cta p {
    color:rgba(255,255,255,.85);
margin-bottom:var(--space-xl)}

.article-author {
    display:flex;
    gap:var(--space-lg);
    background-color:var(--color-light);
    border-radius:var(--radius-lg);
    padding:var(--space-xl);
margin:var(--space-3xl) 0}

.article-author-avatar {
    width:80px;
    height:80px;
    border-radius:50%;
    background-color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:700;
    color:var(--color-secondary);
flex-shrink:0}

.article-author-info h4 {
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:600;
    color:var(--color-secondary);
margin-bottom:var(--space-sm)}

.article-author-info p {
    color:var(--color-text-light);
    margin:0;
font-size:.9375rem}

@media (max-width:992px) {
    .article-header {
    padding:var(--space-3xl) 0 var(--space-2xl)}

    .article-header h1,.article-title {
    font-size:2.5rem}

}

@media (max-width:768px) {
    .article-page {
    padding-bottom:var(--space-4xl)}

    .article-header {
    padding:var(--space-2xl) 0}

    .article-header h1,.article-title {
    font-size:2rem}

    .article-section .h2 {
    font-size:1.75rem}

    .article-section .h3 {
    font-size:1.25rem}

    .article-lead {
    font-size:1.125rem}

    .article-meta {
        flex-direction:column;
    gap:var(--space-sm)}

    .article-author {
        flex-direction:column;
        text-align:center;
    align-items:center}

}

@media (max-width:480px) {
    .article-page {
    padding-bottom:var(--space-3xl)}

    .article-header h1,.article-title {
    font-size:1.75rem}

    .article-section .h2 {
    font-size:1.5rem}

    .article-section .h3 {
    font-size:1.25rem}

    .article-content {
    font-size:1rem}

}

.breadcrumb-nav {
    background-color:var(--color-light);
    padding:var(--space-md) 0;
  
padding-top:110px}

.breadcrumb-list {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-xs);
    list-style:none;
    padding:0;
    margin:0;
    font-size:.875rem;
font-family:var(--font-secondary)}

.breadcrumb-item {
    display:flex;
    align-items:center;
    gap:var(--space-xs);
color:var(--color-text-light)}

.breadcrumb-item a {
    color:var(--color-text-light);
    text-decoration:none;
    transition:all .3s ease;
    padding:var(--space-xs) var(--space-sm);
    border-radius:var(--radius-sm);
display:inline-block}

.breadcrumb-item a:hover {
    color:var(--color-secondary);
background-color:rgba(201,184,163,.15)}

.breadcrumb-item.active {
    color:var(--color-secondary);
font-weight:500}

.breadcrumb-item.active span {
padding:var(--space-xs) var(--space-sm)}

.breadcrumb-separator {
    color:var(--color-primary);
    opacity:.5;
flex-shrink:0}

@media (max-width:768px) {
    .breadcrumb-nav {
        padding:var(--space-sm) 0;
    padding-top:80px}

    .breadcrumb-list {
        font-size:.8125rem;
    gap:4px}

    .breadcrumb-item a,.breadcrumb-item.active span {
    padding:var(--space-xs)}

    .breadcrumb-separator {
        width:14px;
    height:14px}

}

@media (max-width:480px) {
    .breadcrumb-list {
    font-size:.75rem}

    .breadcrumb-separator {
        width:12px;
    height:12px}

}

.product-navigation {
    background-color:var(--color-light);
    padding:var(--space-2xl) 0;
border-top:1px solid var(--color-gray)}

.product-navigation-inner {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:var(--space-xl);
align-items:center}

.product-nav-link {
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
    padding:var(--space-lg);
    background-color:var(--color-white);
    border-radius:var(--radius-lg);
    border:1px solid var(--color-gray);
    transition:all .3s ease;
    text-decoration:none;
color:var(--color-text)}

.product-nav-link:hover {
    border-color:var(--color-primary);
    box-shadow:0 4px 12px rgba(201,184,163,.2);
transform:translateY(-2px)}

.product-nav-prev {
text-align:left}

.product-nav-next {
text-align:right}

.product-nav-direction {
    display:flex;
    align-items:center;
    gap:var(--space-xs);
    font-family:var(--font-primary);
    font-size:.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
color:var(--color-primary-dark)}

.product-nav-prev .product-nav-direction {
justify-content:flex-start}

.product-nav-next .product-nav-direction {
justify-content:flex-end}

.product-nav-direction svg {
    flex-shrink:0;
transition:transform .3s ease}

.product-nav-link:hover .product-nav-direction svg {
transform:translateX(-3px)}

.product-nav-next:hover .product-nav-direction svg {
transform:translateX(3px)}

.product-nav-name {
    font-family:var(--font-secondary);
    font-size:1rem;
    font-weight:500;
    color:var(--color-secondary);
line-height:1.5}

.product-nav-back {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    background-color:var(--color-white);
    border:2px solid var(--color-primary);
    border-radius:50%;
    color:var(--color-primary);
    transition:all .3s ease;
text-decoration:none}

.product-nav-back:hover {
    background-color:var(--color-primary);
    color:var(--color-white);
    transform:scale(1.1);
box-shadow:0 4px 12px rgba(201,184,163,.3)}

@media (max-width:768px) {
    .product-navigation {
    padding:var(--space-xl) 0}

    .product-navigation-inner {
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
    gap:var(--space-md)}

    .product-nav-prev {
        grid-row:1;
    text-align:center}

    .product-nav-back {
        grid-row:2;
    justify-self:center}

    .product-nav-next {
        grid-row:3;
    text-align:center}

    .product-nav-direction {
    justify-content:center!important}

    .product-nav-link {
    padding:var(--space-md)}

}

@media (max-width:480px) {
    .product-navigation {
    padding:var(--space-lg) 0}

    .product-nav-name {
    font-size:.9375rem}

    .product-nav-back {
        width:48px;
    height:48px}

    .product-nav-back svg {
        width:20px;
    height:20px}

}

.social-share {
    padding:var(--space-lg) 0;
    border-top:1px solid rgba(201,184,163,.2);
border-bottom:1px solid rgba(201,184,163,.2)}

.social-share-label {
    font-family:var(--font-primary);
    font-size:.875rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--color-secondary);
margin-bottom:var(--space-md)}

.social-share-buttons {
    display:flex;
    flex-wrap:wrap;
gap:var(--space-md)}

.social-share-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:9999px;
    background-color:var(--color-light);
    color:var(--color-secondary);
    border:1px solid rgba(201,184,163,.3);
    cursor:pointer;
    transition:all .3s ease;
text-decoration:none}

.social-share-btn:hover {
    transform:translateY(-3px);
box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}

.social-share-facebook:hover {
    background-color:#1877f2;
    border-color:#1877f2;
color:#fff}

.social-share-twitter:hover {
    background-color:#000;
    border-color:#000;
color:#fff}

.social-share-linkedin:hover {
    background-color:#0a66c2;
    border-color:#0a66c2;
color:#fff}

.social-share-whatsapp:hover {
    background-color:#25d366;
    border-color:#25d366;
color:#fff}

.social-share-email:hover {
    background-color:var(--color-secondary);
    border-color:var(--color-secondary);
color:#fff}

.social-share-copy:hover {
    background-color:var(--color-primary);
    border-color:var(--color-primary);
color:var(--color-secondary)}

.social-share-copy.copied {
    background-color:#4caf50;
    border-color:#4caf50;
color:#fff}

@media (max-width:480px) {
    .social-share-buttons {
    justify-content:center}

    .social-share-btn {
        width:40px;
    height:40px}

    .social-share-btn svg {
        width:18px;
    height:18px}

}

.blog-sidebar {
position:relative}

.sidebar-container {
    
    top:100px;
    display:flex;
    flex-direction:column;
gap:var(--space-xl)}

.sidebar-card {
    background-color:var(--color-white);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    overflow:hidden;
transition:box-shadow .3s ease}

.sidebar-card:hover {
box-shadow:var(--shadow-card-hover)}

.sidebar-card-header {
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    padding:var(--space-lg);
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
border-bottom:1px solid var(--color-gray)}

.sidebar-card-header svg {
    color:var(--color-primary-dark);
flex-shrink:0}

.sidebar-card-title {
    margin:0;
    color:var(--color-secondary);
font-weight:600}

.toc-list {
    padding:var(--space-lg);
    display:flex;
    flex-direction:column;
gap:var(--space-sm)}

.toc-link {
    display:block;
    padding:var(--space-sm) var(--space-md);
    color:var(--color-text);
    text-decoration:none;
    font-size:.9375rem;
    line-height:var(--line-height-normal);
    border-left:3px solid transparent;
    transition:all .3s ease;
border-radius:0 var(--radius-sm) var(--radius-sm) 0}

.toc-link:hover {
    background-color:var(--color-light);
    border-left-color:var(--color-primary-light);
padding-left:calc(var(--space-md) + 4px)}

.toc-link.active {
    background-color:var(--color-primary-light);
    border-left-color:var(--color-primary);
    color:var(--color-secondary);
    font-weight:600;
padding-left:calc(var(--space-md) + 4px)}

.toc-link.toc-subsection {
    padding-left:var(--space-xl);
    font-size:.875rem;
color:var(--color-text-light)}

.toc-link.toc-subsection:hover {
padding-left:calc(var(--space-xl) + 4px)}

.toc-link.toc-subsection.active {
padding-left:calc(var(--space-xl) + 4px)}

.toc-empty {
    color:var(--color-text-light);
    text-align:center;
    padding:var(--space-lg);
font-style:italic}

.sidebar-list {
    list-style:none;
    padding:var(--space-lg);
    margin:0;
    display:flex;
    flex-direction:column;
gap:var(--space-sm)}

.sidebar-list-item {
transition:transform .3s ease}

.sidebar-link {
    display:flex;
    align-items:flex-start;
    gap:var(--space-sm);
    padding:var(--space-md);
    color:var(--color-text);
    text-decoration:none;
    border-radius:var(--radius-md);
transition:all .3s ease}

.sidebar-link:hover {
    background-color:var(--color-light);
color:var(--color-secondary)}

.sidebar-link:hover .sidebar-link-icon {
    color:var(--color-primary-dark);
transform:translateX(4px)}

.sidebar-link-icon {
    flex-shrink:0;
    color:var(--color-primary);
    margin-top:2px;
transition:all .3s ease}

.sidebar-link-text {
    flex:1;
    font-size:.9375rem;
    line-height:var(--line-height-normal);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
overflow:hidden}

.sidebar-empty {
    color:var(--color-text-light);
    padding:var(--space-md);
    text-align:center;
font-style:italic}

@media (max-width:991px) {
    .blog-sidebar {
    margin-top:var(--space-3xl)}

    .sidebar-container {
        position:relative;
        top:0;
    gap:var(--space-lg)}

    .toc-list {
        max-height:300px;
    overflow-y:auto}

}

@media (max-width:768px) {
    .sidebar-card-header {
    padding:var(--space-md)}

    .sidebar-list,.toc-list {
    padding:var(--space-md)}

    .sidebar-link-text {
    font-size:.875rem}

}

@media (max-width:480px) {
    .sidebar-card {
    border-radius:var(--radius-lg)}

    .sidebar-link,.toc-link {
    padding:var(--space-sm)}

    .toc-link.toc-subsection {
    padding-left:var(--space-lg)}

    .toc-link.toc-subsection.active,.toc-link.toc-subsection:hover {
    padding-left:calc(var(--space-lg) + 4px)}

}

.toc-list::-webkit-scrollbar {
width:6px}

.toc-list::-webkit-scrollbar-track {
    background:var(--color-light);
border-radius:var(--radius-sm)}

.toc-list::-webkit-scrollbar-thumb {
    background:var(--color-primary);
border-radius:var(--radius-sm)}

.toc-list::-webkit-scrollbar-thumb:hover {
background:var(--color-primary-dark)}

.footer {
    background-color:var(--color-secondary);
    color:var(--color-white);
padding:var(--space-4xl) 0 var(--space-2xl)}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:var(--space-3xl);
margin-bottom:var(--space-3xl)}

.footer-column {
    display:flex;
flex-direction:column}

.footer-about {
max-width:400px}

.footer-title {
    color:var(--color-white);
    margin-bottom:var(--space-lg);
font-weight:600}

.footer-description {
    color:var(--color-primary-light);
    line-height:var(--line-height-relaxed);
margin-bottom:var(--space-xl)}

.footer-address {
    font-style:normal;
    color:var(--color-primary-light);
    line-height:1.8;
margin-bottom:var(--space-xl)}

.footer-contact-item {
    display:flex;
    align-items:flex-start;
    gap:var(--space-sm);
margin-bottom:var(--space-md)}

.footer-contact-item svg {
    flex-shrink:0;
    margin-top:2px;
color:var(--color-primary)}

.footer-contact-item a {
    color:var(--color-primary-light);
    text-decoration:none;
transition:color .3s ease}

.footer-contact-item a:hover {
color:var(--color-white)}

.footer-social {
margin-top:var(--space-lg)}

.footer-social-title {
    color:var(--color-white);
    margin-bottom:var(--space-md);
    font-size:.875rem;
    text-transform:uppercase;
letter-spacing:var(--letter-spacing-wider)}

.social-links {
    display:flex;
gap:var(--space-md)}

.social-link {
    width:40px;
    height:40px;
    border-radius:var(--radius-full);
    background-color:rgba(201,184,163,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-primary-light);
    text-decoration:none;
transition:all .3s ease}

.social-link:hover {
    background-color:var(--color-primary);
    color:var(--color-secondary);
transform:translateY(-4px)}

.social-link svg {
vertical-align:middle}

.footer-links {
    list-style:none;
    padding:0;
margin:0}

.footer-links li {
margin-bottom:var(--space-md)}

.footer-links a {
    color:var(--color-primary-light);
    text-decoration:none;
    font-size:.9375rem;
    transition:all .3s ease;
display:inline-block}

.footer-links a:hover {
    color:var(--color-white);
transform:translateX(4px)}

.footer-recent-posts {
    list-style:none;
    padding:0;
margin:0}

.recent-post-item {
margin-bottom:var(--space-lg)}

.recent-post-link {
    color:var(--color-primary-light);
    text-decoration:none;
    font-size:.875rem;
    line-height:var(--line-height-normal);
    display:flex;
    align-items:flex-start;
    gap:var(--space-sm);
transition:all .3s ease}

.recent-post-link svg {
    flex-shrink:0;
    margin-top:2px;
    opacity:0;
    transform:translateX(-4px);
transition:all .3s ease}

.recent-post-link:hover {
color:var(--color-white)}

.recent-post-link:hover svg {
    opacity:1;
transform:translateX(0)}

.recent-post-link span {
    flex:1;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
overflow:hidden}

.footer-divider {
    border-top:1px solid rgba(201,184,163,.2);
margin-bottom:var(--space-xl)}

.footer-bottom {
    text-align:center;
color:var(--color-primary-light)}

.footer-copyright {
    margin-bottom:var(--space-sm);
color:var(--color-white)}

.footer-credits {
    opacity:.7;
color:var(--color-white)}

.footer-credits a {
    
    text-decoration:none;
    transition:color .3s ease;
font-weight:900}

.footer-credits a:hover {
color:var(--color-white)}

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

@media (max-width:1024px) {
    .footer-grid {
        grid-template-columns:1fr 1fr;
    gap:var(--space-2xl)}

    .footer-about {
    max-width:100%}

}

@media (max-width:768px) {
    .footer {
    padding:var(--space-3xl) 0 var(--space-xl)}

    .footer-grid {
        grid-template-columns:1fr;
    gap:var(--space-3xl)}

    .footer-about {
    text-align:left}

    .footer-social {
    margin-top:var(--space-xl)}

    .social-links {
    justify-content:flex-start}

    .footer-column {
        padding-bottom:var(--space-xl);
    border-bottom:1px solid rgba(201,184,163,.1)}

    .footer-column:last-child {
        border-bottom:none;
    padding-bottom:0}

}

@media (max-width:480px) {
    .footer-contact-item {
        flex-direction:column;
        align-items:flex-start;
    gap:var(--space-xs)}

    .footer-bottom {
    padding:0 var(--space-md)}

}

.blog-section {
    padding:var(--space-4xl) 0;
background-color:var(--color-white)}

.blog-section .section-header {
    text-align:center;
margin-bottom:var(--space-3xl)}

.blog-section .section-header .h2 {
margin-bottom:var(--space-md)}

.blog-empty-state {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:400px;
padding:var(--space-5xl) var(--space-lg)}

.empty-state-content {
    max-width:500px;
text-align:center}

.empty-state-icon {
    margin-bottom:var(--space-xl);
    color:var(--color-primary);
opacity:.4}

.empty-state-description {
    color:var(--color-text-light);
margin-bottom:var(--space-2xl)}

.empty-state-content .h2 {
margin-bottom:var(--space-lg)}

.empty-state-content .btn svg {
vertical-align:middle}

.blog-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-xl);
margin-bottom:var(--space-3xl)}

.blog-card {
    transition:all .3s ease;
    height:100%;
    display:flex;
flex-direction:column}

.blog-card:hover {
    transform:translateY(-8px);
box-shadow:var(--shadow-card-hover)}

.blog-link {
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
height:100%}

.blog-image {
    height:220px;
    overflow:hidden;
    border-radius:var(--radius-card) var(--radius-card) 0 0;
    background-color:var(--color-light);
    display:flex;
    align-items:center;
justify-content:center}

.blog-image img {
    width:100%;
    height:100%;
    object-fit:contain;
    background-color: var(--color-primary);
transition:transform .5s ease}

.blog-card:hover .blog-image img {
transform:scale(1.08)}

.blog-image-placeholder {
background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%)}

.blog-image-placeholder svg {
    color:var(--color-primary);
opacity:.4}

.blog-card .card-body {
    padding:var(--space-xl);
    display:flex;
    flex-direction:column;
flex:1}

.blog-category {
    display:inline-block;
    padding:var(--space-xs) var(--space-md);
    background-color:var(--color-primary-light);
    border-radius:var(--radius-sm);
    margin-bottom:var(--space-md);
    color:var(--color-secondary);
    font-weight:500;
    text-transform:uppercase;
letter-spacing:var(--letter-spacing-wider)}

.blog-title {
    margin-bottom:var(--space-md);
    transition:color .3s ease;
line-height:var(--line-height-normal)}

.blog-link:hover .blog-title {
color:var(--color-primary-dark)}

.blog-excerpt {
    color:var(--color-text-light);
    margin-bottom:var(--space-lg);
    flex:1;
line-height:var(--line-height-relaxed)}

.blog-meta {
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    margin-bottom:var(--space-lg);
color:var(--color-text-light)}

.blog-meta-item {
    display:flex;
    align-items:center;
gap:var(--space-xs)}

.blog-meta-item svg {
vertical-align:middle}

.blog-meta-separator {
color:var(--color-gray)}

.blog-cta {
    color:var(--color-secondary);
    font-weight:500;
    font-size:.9375rem;
    display:inline-flex;
    align-items:center;
    gap:var(--space-xs);
transition:all .3s ease}

.blog-link:hover .blog-cta {
    color:var(--color-primary-dark);
transform:translateX(4px)}

.blog-cta svg {
vertical-align:middle}

.blog-section .section-cta {
text-align:center}

@media (max-width:1024px) {
    .blog-grid {
    grid-template-columns:repeat(2,1fr)}

.img-responsive-services {height:174px;}
}

@media (max-width:768px) {
    .blog-section {
    padding:var(--space-3xl) 0}

    .blog-grid {
        grid-template-columns:1fr;
    gap:var(--space-lg)}

    .blog-image {
    height:200px}

    .blog-card .card-body {
    padding:var(--space-lg)}

    .blog-empty-state {
        min-height:300px;
    padding:var(--space-3xl) var(--space-md)}

    .empty-state-icon svg {
        width:60px;
    height:60px}

    .empty-state-content .h2 {
    font-size:1.75rem}

}

@media (max-width:480px) {
    .blog-section .section-header .h2 {
    font-size:2rem}

    .blog-card .card-body {
    padding:var(--space-md)}

    .blog-meta {
    flex-wrap:wrap}

}

.related-products {
    background-color:var(--bg-light);
padding:var(--space-4xl) 0}

.related-products .section-header {
    text-align:center;
margin-bottom:var(--space-3xl)}

.related-products .section-header .h2 {
margin-bottom:var(--space-md)}

.related-products .products-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:var(--space-xl);
    margin-bottom:var(--space-3xl);
    max-width:1200px;
    margin-left:auto;
margin-right:auto}

.related-products .product-card {
    transition:all .3s ease;
    height:100%;
    display:flex;
flex-direction:column}

.related-products .product-card:hover {
    transform:translateY(-8px);
box-shadow:var(--shadow-card-hover)}

.related-products .product-image {
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-card) var(--radius-card) 0 0;
    height:280px;
    background-color:var(--color-light);
    display:flex;
    align-items:center;
justify-content:center}

.related-products .product-image img {
    width:100%;
    height:100%;
    object-fit:contain;
transition:transform .5s ease}

.related-products .product-card:hover .product-image img {
transform:scale(1.08)}

.related-products .product-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%)}

.related-products .product-badge {
    position:absolute;
    top:var(--space-md);
    right:var(--space-md);
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-full);
    font-size:.75rem;
    font-weight:600;
    background-color:var(--color-white);
    box-shadow:var(--shadow-md);
z-index:10}

.related-products .badge-bestseller {
    background-color:var(--color-accent);
color:var(--color-secondary)}

.related-products .badge-new {
    background-color:var(--color-secondary);
color:var(--color-white)}

.related-products .badge-promo {
    background-color:var(--color-error);
color:var(--color-white)}

.related-products .card-body {
    padding:var(--space-lg);
    display:flex;
    flex-direction:column;
flex:1}

.related-products .product-category {
    color:var(--color-primary-dark);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:var(--letter-spacing-wider);
margin-bottom:var(--space-sm)}

.related-products .product-link {
    text-decoration:none;
    color:inherit;
transition:color .3s ease}

.related-products .product-link:hover .product-name {
color:var(--color-primary-dark)}

.related-products .product-name {
    margin-bottom:var(--space-sm);
transition:color .3s ease}

.related-products .product-description {
    color:var(--color-text-light);
    margin-bottom:var(--space-lg);
    flex:1;
line-height:var(--line-height-relaxed)}

.related-products .product-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
margin-top:auto}

.related-products .product-price {
    color:var(--color-secondary);
margin:0}

.related-products .product-actions {
    display:flex;
gap:var(--space-sm)}

.related-products .product-actions .btn {
    display:inline-flex;
    align-items:center;
justify-content:center}

.related-products .product-actions svg {
vertical-align:middle}

.related-products .section-cta {
text-align:center}

.related-products .section-cta .btn svg {
vertical-align:middle}

@media (max-width:1024px) {
    .related-products .products-grid {
    grid-template-columns:repeat(2,1fr)}

}

@media (max-width:768px) {
    .related-products {
    padding:var(--space-3xl) 0}

    .related-products .products-grid {
        grid-template-columns:1fr;
    gap:var(--space-lg)}

    .related-products .product-image {
    height:240px}

    .related-products .product-footer {
        flex-direction:column;
        gap:var(--space-md);
    align-items:stretch}

    .related-products .product-actions {
    width:100%}

    .related-products .product-actions .btn {
    flex:1}

}

@media (max-width:480px) {
    .related-products .section-header .h2 {
    font-size:2rem}

    .related-products .card-body {
    padding:var(--space-md)}

}

@keyframes cartBadgeBounce {
    0% {
    transform:translate(-50%,-50%) scale(1)}

    50% {
    transform:translate(-50%,-50%) scale(1.4)}

    100% {
    transform:translate(-50%,-50%) scale(1)}

}

.cart-badge-bounce {
animation:cartBadgeBounce .4s ease}

.article-page {
    background-color:var(--color-white);
padding-bottom:var(--space-5xl)}

.article-title {
    margin-bottom:var(--space-xl);
color:var(--color-secondary)}

.article-meta {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:var(--space-md);
color:var(--color-text-light)}

.article-meta-item {
    display:flex;
    align-items:center;
    gap:var(--space-xs);
font-size:.9375rem}

.article-meta-item svg {
color:var(--color-primary)}

.article-meta-separator {
color:var(--color-gray)}

.article-tags {
    display:flex;
gap:var(--space-sm)}

.article-tag {
    padding:var(--space-xs) var(--space-md);
    background-color:var(--color-primary);
    color:var(--color-secondary);
    font-size:.75rem;
    font-weight:600;
    border-radius:var(--radius-full);
    text-transform:uppercase;
letter-spacing:var(--letter-spacing-wider)}

.article-tag.tag-secondary {
    background-color:var(--color-secondary);
color:var(--color-white)}

.article-content {
    font-family:var(--font-secondary);
    font-size:1.0625rem;
    line-height:var(--line-height-relaxed);
color:var(--color-text)}

.article-content p {
margin-bottom:var(--paragraph-spacing-md)}

.article-lead {
    font-size:1.25rem;
    line-height:var(--line-height-relaxed);
    color:var(--color-text);
    margin-bottom:var(--space-3xl);
font-weight:400}

.article-section {
margin-bottom:var(--space-4xl)}

.article-section .h2 {
    margin-top:var(--space-3xl);
    margin-bottom:var(--space-xl);
color:var(--color-secondary)}

.article-section .h3 {
    margin-top:var(--space-2xl);
    margin-bottom:var(--space-lg);
color:var(--color-secondary)}

.article-content strong {
    font-weight:600;
color:var(--color-secondary)}

.article-content em {
    font-style:italic;
color:var(--color-text)}

.article-highlight {
    background-color:var(--color-accent-yellow);
    color:var(--color-secondary);
    padding:2px 6px;
border-radius:var(--radius-sm)}

.article-highlight.highlight-white {
    background-color:rgba(255,255,255,.3);
color:var(--color-white)}

.article-alert {
    display:flex;
    gap:var(--space-lg);
    padding:var(--space-xl);
    border-radius:var(--radius-lg);
margin:var(--space-2xl) 0}

.alert-info {
    background-color:#e3f2fd;
border-left:4px solid #2196f3}

.alert-warning {
    background-color:#fff3e0;
border-left:4px solid #ff9800}

.alert-icon {
    flex-shrink:0;
color:inherit}

.alert-info .alert-icon {
color:#2196f3}

.alert-warning .alert-icon {
color:#ff9800}

.alert-content {
flex:1}

.alert-title {
    display:block;
    font-weight:600;
    margin-bottom:var(--space-sm);
color:var(--color-secondary)}

.alert-text {
    margin:0;
line-height:var(--line-height-relaxed)}

.article-list,.article-list-numbered {
    margin:var(--space-xl) 0;
padding-left:var(--space-xl)}

.article-list li,.article-list-numbered li {
    margin-bottom:var(--space-lg);
line-height:var(--line-height-relaxed)}

.article-list li::marker {
color:var(--color-primary)}

.article-list-numbered {
    counter-reset:item;
    list-style:none;
padding-left:0}

.article-list-numbered li {
    counter-increment:item;
    position:relative;
padding-left:var(--space-3xl)}

.article-list-numbered li::before {
    content:counter(item);
    position:absolute;
    left:0;
    top:0;
    width:32px;
    height:32px;
    background-color:var(--color-primary);
    color:var(--color-secondary);
    border-radius:var(--radius-full);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
font-size:.875rem}

.article-table-wrapper {
    margin:var(--space-2xl) 0;
    overflow-x:auto;
    border-radius:var(--radius-lg);
box-shadow:var(--shadow-md)}

.article-table {
    width:100%;
    border-collapse:collapse;
background-color:var(--color-white)}

.article-table thead {
    background:var(--color-primary);
color:var(--color-secondary)}

.article-table th {
    padding:var(--space-lg);
    text-align:left;
    font-weight:600;
    font-size:.9375rem;
    text-transform:uppercase;
letter-spacing:var(--letter-spacing-wide)}

.article-table td {
    padding:var(--space-lg);
border-bottom:1px solid var(--color-gray)}

.article-table tbody tr:last-child td {
border-bottom:none}

.article-table tbody tr:nth-child(2n) {
background-color:var(--color-light)}

.article-table tbody tr:hover {
background-color:var(--color-primary-light)}

.article-blockquote {
    position:relative;
    background:linear-gradient(135deg,var(--color-light) 0,var(--color-primary-light) 100%);
    padding:var(--space-3xl);
    border-radius:var(--radius-xl);
    margin:var(--space-3xl) 0;
border-left:4px solid var(--color-primary)}

.quote-icon {
    position:absolute;
    top:var(--space-xl);
    left:var(--space-xl);
    color:var(--color-primary);
opacity:.3}

.quote-text {
    font-size:1.125rem;
    line-height:var(--line-height-relaxed);
    font-style:italic;
    color:var(--color-secondary);
    margin-bottom:var(--space-lg);
padding-left:var(--space-4xl)}

.quote-author {
    padding-left:var(--space-4xl);
    color:var(--color-text-light);
font-size:.9375rem}

.quote-author strong {
color:var(--color-secondary)}

.article-cta-section {
    background:linear-gradient(135deg,var(--color-secondary) 0,var(--color-secondary-light) 100%);
    color:var(--color-white);
    padding:var(--space-4xl);
    border-radius:var(--radius-2xl);
margin:var(--space-4xl) 0}

.article-cta-section .h2 {
color:var(--color-white)}

.article-cta-section p {
color:rgba(255,255,255,.9)}

.article-cta-section strong {
color:var(--color-white)}

.article-resources {
    display:flex;
    gap:var(--space-lg);
    padding:var(--space-xl);
    background-color:var(--color-light);
    border-left:4px solid var(--color-primary);
    border-radius:var(--radius-lg);
margin:var(--space-3xl) 0}

.resources-icon {
    flex-shrink:0;
color:var(--color-primary)}

.resources-content .h5 {
    margin-bottom:var(--space-md);
color:var(--color-secondary)}

.resources-content p {
    margin-bottom:var(--space-md);
color:var(--color-text)}

.resources-content ul {
    margin:0;
    padding-left:var(--space-lg);
color:var(--color-text)}

.resources-content li {
margin-bottom:var(--space-sm)}

@media (max-width:768px) {
    .article-header {
    padding:var(--space-4xl) 0 var(--space-3xl)}

    .article-title {
    font-size:2rem}

    .article-meta {
        flex-direction:column;
    gap:var(--space-sm)}

    .article-lead {
    font-size:1.125rem}

    .article-content {
    font-size:1rem}

    .article-alert,.article-cta-section {
        flex-direction:column;
    padding:var(--space-lg)}

    .article-table-wrapper {
    font-size:.875rem}

    .article-table td,.article-table th {
    padding:var(--space-md)}

    .article-blockquote {
    padding:var(--space-xl)}

    .quote-icon {
        width:30px;
    height:30px}

    .quote-text {
        font-size:1rem;
    padding-left:var(--space-2xl)}

    .quote-author {
    padding-left:var(--space-2xl)}

    .article-list-numbered li::before {
        width:28px;
        height:28px;
    font-size:.75rem}

}

@media (max-width:480px) {
    .article-page {
    padding-bottom:var(--space-3xl)}

    .article-section .h2 {
    font-size:1.5rem}

    .article-section .h3 {
    font-size:1.25rem}

}

a {
text-decoration:none}

-NoNewline
.feature-badge {
    display:inline-block;
    padding:.25rem .5rem;
    background:rgba(49,53,255,.1);
    color:var(--color-primary);
    border-radius:.25rem;
    font-size:.75rem;
    font-weight:500;
margin:.125rem}

.product-features {
    display:flex;
    flex-wrap:wrap;
    gap:.25rem;
margin-bottom:.75rem}

.download-btn {
    display:inline-flex;
    align-items:center;
gap:.5rem}

/* ============================================
   ACCESSIBILITÉ (fusionné depuis accessibility.css)
   ============================================ */

/* Focus visible (accessibilité clavier) */
:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 2px;
}

.footer :focus-visible {
    outline-color: #ffffff;
}

/* Images responsive */
.img-responsive {
    max-width: 100%;
    height: auto;
}



.usp-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.usp-visual img {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 120px;
}

.usp-card {
    text-align: center;
}

.storytelling-visual,
.local-map {
    overflow: hidden;
}

.storytelling-visual img,
.local-map img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 992px) {
    .storytelling-grid,
    .local-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .storytelling-visual,
    .local-map {
        order: -1;
    }
}

@media (max-width: 768px) {
    .usp-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .usp-visual img {
        max-height: 100px;
    }
    .storytelling-visual img,
    .local-map img {
        width: 100%;
        height: auto;
    }
}

/* Classes utilitaires pour inline styles nettoyés */
.icon-mr {
    margin-right: 8px;
}

.mt-section {
    margin-top: 40px;
}

.product-detail-image {
    height: 400px;
}

/* ============================================
   BLOG ARTICLE — How To & FAQ (fusionné depuis inline)
   ============================================ */

.how-to-section {
    background-color: var(--color-light);
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    margin: var(--space-3xl) 0;
}

.how-to-intro {
    font-size: 1.0625rem;
    line-height: var(--line-height-relaxed);
}

.how-to-supplies {
    background-color: var(--color-white);
}

.how-to-step {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.how-to-step:hover {
    transform: translateX(4px);
}

.step-number {
    font-family: var(--font-primary);
    width: 40px;
    height: 40px;
    font-weight: bold;
}

.how-to-tips {
    border-left: 4px solid var(--color-primary);
}

.faq-section {
    margin: var(--space-3xl) 0;
}

.faq-item {
    border-left: 4px solid var(--color-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.faq-item h3 {
    color: var(--color-secondary);
    font-weight: 600;
}

.faq-item p {
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

@media (max-width: 768px) {
    .how-to-section {
        padding: var(--space-lg);
    }
    .how-to-step,
    .faq-item {
        padding: var(--space-lg) !important;
    }
}


.hero-content * {
  color: var(--color-primary-light);
}
.badge{color: var(--bg-dark);}

.navbar {background-color: var(--bg-dark);
}
    .nav-link{color: var(--bg-light);}

    .trust-bar {
        background-color: var(--bg-dark);
    }

 .trust-grid p,
.trust-grid h3 {
    color: var(--bg-light);
}

.related-products {
    background-color: #DA291C14;

}

.btn-secondary {

    color: var(--color-primary-light);
 
}

.usp-section {
   
    background-color: var(--bg-dark);
}

.usp-card h3
 {
 
    color: var(--color-primary-light);
}

.usp-visual svg {

    stroke: var(--color-primary-light);
  
}

.article-tag {
    color: var(--color-primary-light);
}

.article-table th {
    color: var(--bg-primary);
}

.article-highlight {
    background-color: #DA291C3b;

}

.article-list-numbered li::before {
  
    color: var(--color-primary-light);

}

.usp-card p{color: var(--color-primary-light);}

.footer-contact-item svg {
    color: var(--color-primary-light);
}

.usp-section .h2, h2    {
    color: var(--color-primary-light);
}

.footer-credits a {
    color: #ffcfcf;

}

.breadcrumb-nav {
    background-color: var(--color-primary);

}

.breadcrumb-item.active {
    color: var(--color-primary-light);
   
}
.breadcrumb-item a {
    color: var(--color-primary-light);
  
}

.breadcrumb-item {
    color: var(--color-primary-light);
}

.storytelling-visual img, .local-map img {
    width: 100%;
    
}


.blog-card {

    border-style: solid;
    /* border-width: medium; */
    border-color: var(--color-dark);
}

.blog-category {

    background-color: var(--color-primary);

    color: var(--color-white);
 
}

.nav-icon {
  
    color: var(--color-primary-light);
 
}

@media (max-width: 992px) {
    .nav-menu {
  
        background-color: var(--bg-dark);
    }}

   .hero-content .update-date time {

    color: var(--color-primary-dark);
}
   .hero-content .update-date {

    color: var(--color-primary-dark);
}
.hero-content svg {
    color: var(--color-primary);
}

.outline {
    outline: 2px solid var(--color-primary-light);

}

.cta-buttons a {
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.logo {

    padding-right: var(--space-xl);}
    .logo-img {
    max-width: 100px;
   
}


.feature-icon {

    background-color: var(--color-primary);
    color: var(--color-primary-light);
}

.product-page .badge {
    color: var(--color-primary-light);
}

.shop-guarantees {
    background-color: var(--bg-dark);}

    .guarantee-item .h5 {
        color: var(--color-primary-light);
    }

        .guarantee-item .body-s {
        color: var(--color-primary-light);
    }

            .guarantee-item svg {
        color: var(--color-primary-light);
    }

    .usp-section .h2, h2 {
    color: var(--color-primary-dark);
}

.badge {     background-color: var(--color-primary-dark);
    color: var(--color-primary-light);}