:root{--color-primary:#6750A4;--color-primary-dark:#4F378B;--color-primary-light:#D0BCFF;--color-on-primary:#FFFFFF;--color-primary-container:#EADDFF;--color-on-primary-container:#21005D;--color-secondary:#625B71;--color-secondary-dark:#4A4458;--color-secondary-light:#CCC2DC;--color-on-secondary:#FFFFFF;--color-secondary-container:#E8DEF8;--color-on-secondary-container:#1D192B;--color-surface:#FFFFFF;--color-surface-variant:#E7E0EC;--color-on-surface:#1C1B1F;--color-on-surface-variant:#49454F;--color-background:#FFFBFE;--color-on-background:#1C1B1F;--color-error:#B3261E;--color-on-error:#FFFFFF;--color-error-container:#F9DEDC;--color-on-error-container:#410E0B;--color-success:#2E7D32;--color-success-container:#E8F5E9;--color-warning:#FFB300;--color-warning-container:#FFF3E0;--color-favorite:#FF4444;--color-favorite-container:#FFE8E8;--color-outline:#79747E;--color-outline-variant:#CAC4D0;--color-disabled-background:#E0E0E0;--color-disabled-content:#9E9E9E;--font-family-base:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;--font-size-display-large:57px;--font-size-display-medium:45px;--font-size-display-small:36px;--font-size-headline-large:32px;--font-size-headline-medium:28px;--font-size-headline-small:24px;--font-size-title-large:22px;--font-size-title-medium:16px;--font-size-title-small:14px;--font-size-body-large:16px;--font-size-body-medium:14px;--font-size-body-small:12px;--font-size-label-large:14px;--font-size-label-medium:12px;--font-size-label-small:11px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.75;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-xxl:32px;--spacing-xxxl:48px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--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);--transition-fast:150ms ease-in-out;--transition-base:250ms ease-in-out;--transition-slow:350ms ease-in-out;--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-modal-backdrop:1040;--z-index-modal:1050;--z-index-popover:1060;--z-index-tooltip:1070;--breakpoint-mobile:480px;--breakpoint-tablet:768px;--breakpoint-desktop:1024px;--breakpoint-wide:1200px}@media (prefers-color-scheme:dark){:root{--color-primary:#D0BCFF;--color-primary-dark:#EADDFF;--color-primary-light:#4F378B;--color-on-primary:#381E72;--color-primary-container:#4F378B;--color-on-primary-container:#EADDFF;--color-secondary:#CCC2DC;--color-secondary-dark:#E8DEF8;--color-secondary-light:#4A4458;--color-on-secondary:#332D41;--color-secondary-container:#4A4458;--color-on-secondary-container:#E8DEF8;--color-surface:#1C1B1F;--color-surface-variant:#49454F;--color-on-surface:#E6E1E5;--color-on-surface-variant:#CAC4D0;--color-background:#1C1B1F;--color-on-background:#E6E1E5;--color-error:#CF6679;--color-on-error:#000000;--color-error-container:#93000A;--color-on-error-container:#F9DEDC;--color-success:#81C784;--color-success-container:#1B5E20;--color-warning:#FFD54F;--color-warning-container:#5D4037;--color-favorite:#FF6B6B;--color-favorite-container:#5C1A1A;--color-outline:#938F99;--color-outline-variant:#49454F;--color-disabled-background:#424242;--color-disabled-content:#757575;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -1px rgba(0,0,0,0.3);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.4),0 4px 6px -2px rgba(0,0,0,0.3);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.3)}}.display-large{font-size:var(--font-size-display-large);font-weight:var(--font-weight-regular);line-height:var(--line-height-tight)}.headline-medium{font-size:var(--font-size-headline-medium);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.headline-small{font-size:var(--font-size-headline-small);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.title-large{font-size:var(--font-size-title-large);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}.title-medium{font-size:var(--font-size-title-medium);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}.body-large{font-size:var(--font-size-body-large);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.body-medium{font-size:var(--font-size-body-medium);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.label-small{font-size:var(--font-size-label-small);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);letter-spacing:0.5px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-y:scroll}body{font-family:var(--font-family-base);background-color:var(--color-background);color:var(--color-on-background);line-height:var(--line-height-normal);min-height:100vh;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-xl)}.container-fluid{width:100%;padding:0 var(--spacing-xl)}.mobile-search-container{display:block}@media (min-width:768px){.mobile-search-container{display:none}}.header{position:relative}@media (max-width:767px){.header{height:0;overflow:visible;background:transparent;box-shadow:none}.header-content{visibility:hidden;height:0}.header-content .island-container{visibility:visible}.header-content .logo,.header-content .desktop-nav,.header-content .back-button{display:none}}@media (min-width:768px){.header{display:block;position:fixed;top:0;left:0;right:0;z-index:var(--z-index-fixed);background-color:var(--color-surface);color:var(--color-on-surface);box-shadow:var(--shadow-sm);transition:transform 0.3s ease-in-out;will-change:transform}.header-content{padding:var(--spacing-md) 0;min-height:64px}.header-scroll-hidden{transform:translateY(-100%)}}.header h1{font-size:var(--font-size-headline-medium);font-weight:var(--font-weight-bold);margin:0}.header a{color:inherit;text-decoration:none;transition:opacity var(--transition-fast)}.header a:hover{opacity:0.8}.header-content{display:flex;align-items:center;gap:16px}@media (min-width:768px){.header-content{gap:24px}}.logo{margin:0;font-size:20px;font-weight:700;flex-shrink:0;line-height:1.2}@media (min-width:768px){.logo{font-size:24px}}.logo a{text-decoration:none;color:inherit}.header-center{flex:1;max-width:600px}.back-button{background:transparent;border:none;font-size:14px;font-weight:500;cursor:pointer;padding:4px 8px;color:inherit;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:6px;transition:background-color 0.2s;flex-shrink:0;line-height:1;height:28px;white-space:nowrap}.back-button:hover{background-color:rgba(0,0,0,0.05)}@media (min-width:768px){.back-button{font-size:14px;padding:4px 8px;height:28px}}.main-content{padding:var(--spacing-2xl) 0;min-height:calc(100vh - 200px)}@media (max-width:767px){.main-content{padding-top:72px;padding-bottom:80px}}@media (min-width:768px){.main-content{padding-top:120px}}.footer{background-color:var(--color-surface-variant);padding:var(--spacing-xl) 0;text-align:center;color:var(--color-on-surface-variant);margin-top:var(--spacing-3xl);border-top:1px solid var(--color-outline-variant)}.footer p{margin:0;font-size:var(--font-size-body-medium)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:var(--spacing-lg)}.spinner{width:48px;height:48px;border:4px solid var(--color-outline-variant);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--font-size-body-large);color:var(--color-on-surface-variant)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex-center{display:flex;align-items:center;justify-content:center}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.p-1{padding:var(--spacing-xs)}.p-2{padding:var(--spacing-sm)}.p-3{padding:var(--spacing-md)}.p-4{padding:var(--spacing-lg)}@media (max-width:768px){.container{padding:0 var(--spacing-lg)}.header h1{font-size:var(--font-size-headline-small)}}.btn{padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-full);font-size:var(--font-size-label-large);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);cursor:pointer;transition:all var(--transition-base);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-primary{background-color:var(--color-primary);color:var(--color-on-primary)}.btn-primary:hover{background-color:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-secondary{background-color:var(--color-secondary);color:var(--color-on-secondary)}.btn-secondary:hover{background-color:var(--color-secondary-dark)}.btn-outlined{background-color:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-outlined:hover{background-color:var(--color-primary-container)}.btn:active{transform:scale(0.98)}.btn:disabled{opacity:0.5;cursor:not-allowed}.btn-disabled{background-color:var(--color-disabled-background);color:var(--color-disabled-content);cursor:not-allowed}.card{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:box-shadow var(--transition-base)}.card-elevated{box-shadow:var(--shadow-lg)}.card:hover{box-shadow:var(--shadow-lg)}.badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--font-size-label-small);font-weight:var(--font-weight-medium)}.badge-primary{background-color:var(--color-primary-container);color:var(--color-on-primary-container)}.badge-secondary{background-color:var(--color-secondary-container);color:var(--color-on-secondary-container)}.badge-success{background-color:var(--color-success-container);color:var(--color-success)}.badge-error{background-color:var(--color-error-container);color:var(--color-error)}.link{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}.link:hover{color:var(--color-primary-dark);text-decoration:underline}.back-button{display:inline-flex;align-items:center;color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xl);transition:color var(--transition-base)}.back-button:hover{color:var(--color-primary-dark)}.divider{height:1px;background-color:var(--color-outline-variant);border:none;margin:var(--spacing-lg) 0}.status-indicator{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-size:var(--font-size-body-small);font-weight:var(--font-weight-semibold);width:fit-content}.in-stock{background-color:var(--color-success-container);color:var(--color-success)}.out-of-stock{background-color:var(--color-error-container);color:var(--color-error)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-base)}.slide-up{animation:slideUp var(--transition-base)}.slide-down{animation:slideDown var(--transition-base)}.desktop-nav{display:none;gap:8px;margin-left:auto;flex-shrink:0}@media (min-width:768px){.desktop-nav{display:flex}}.desktop-nav .nav-link{text-decoration:none;color:var(--color-on-surface);font-weight:500;font-size:15px;padding:10px 20px;border-radius:8px;transition:all 0.2s;white-space:nowrap}.desktop-nav .nav-link:hover{background:var(--color-surface-variant)}.desktop-nav .nav-link.active{color:var(--color-primary);background:var(--color-primary-light)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background-color:var(--color-surface);padding:var(--spacing-sm) 0;box-shadow:var(--shadow-sm);z-index:var(--z-index-sticky)}@media (min-width:768px){.bottom-nav{display:none}}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;text-decoration:none;color:var(--color-on-surface-variant);transition:all 0.2s ease;border-radius:8px;min-width:64px;flex:1;max-width:100px}.nav-item:hover{background:var(--color-surface-variant)}.nav-item.active{color:var(--color-primary)}.nav-icon{font-size:24px;line-height:1}.nav-label{font-size:12px;font-weight:500}.lang-switcher{display:flex;align-items:center;gap:4px;margin-left:12px;padding-left:12px;border-left:1px solid var(--color-outline-variant)}.lang-option{font-size:13px;font-weight:500;color:var(--color-on-surface-variant);cursor:default}.lang-option a{text-decoration:none;color:var(--color-on-surface-variant);padding:4px 6px;border-radius:4px;transition:all 0.2s}.lang-option a:hover{color:var(--color-primary);background:var(--color-primary-light)}.lang-option.active{color:var(--color-primary);font-weight:700}.main-content{min-height:calc(100vh - 200px)}@media (max-width:767px){.main-content{padding-bottom:80px}}@media (max-width:767px){.header-content{gap:12px}.logo{font-size:20px}.header-center{max-width:none}.back-button{padding:8px;font-size:14px}}