/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* 临时覆盖，避免继续引用丢失的远端字体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* 请在此文件中定位并注释掉对
   https://relx.wanstudio.top/assets/fonts/manrope/Manrope-VariableFont_wght.woff2
   的 @font-face 规则，或改为本地路径 */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/literata/Literata72pt-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/literata/Literata72pt-SemiBold.woff2') format('woff2');
}

:root {
    color-scheme: light;
    --color-base: #ffffff;
    --color-contrast: #111111;
    --color-accent-1: #FFEE58;
    --color-accent-2: #F6CFF4;
    --color-accent-3: #503AA8;
    --color-accent-4: #686868;
    --color-accent-5: #FBFAF3;
    --shadow-soft: 0 24px 60px rgba(80, 58, 168, 0.12);
    --shadow-card: 0 18px 35px rgba(17, 17, 17, 0.08);
    --radius-large: 32px;
    --radius-medium: 24px;
    --radius-small: 16px;
    --font-sans: 'Manrope', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Literata', 'Noto Serif SC', 'Songti SC', serif;
    --space-xs: clamp(0.75rem, 0.7rem + 0.4vw, 1rem);
    --space-sm: clamp(1rem, 0.9rem + 0.6vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    --space-lg: clamp(2.5rem, 2rem + 2vw, 3.75rem);
    --space-xl: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-accent-5);
    color: var(--color-contrast);
    font-family: var(--font-sans);
    line-height: 1.7;
    letter-spacing: 0.01em;
}

a {
    color: var(--color-accent-3);
    text-decoration: none;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
    color: color-mix(in srgb, var(--color-accent-3) 85%, #ffffff);
    text-decoration: underline;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.container {
    width: min(1120px, 92vw);
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-base);
    box-shadow: 0 8px 30px rgba(17, 17, 17, 0.08);
    border-bottom: 4px solid var(--color-accent-2);
}

.site-header::after {
    content: '';
    position: absolute;
    inset: auto 0 -4px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent-1));
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-weight: 700;
    color: var(--color-base);
    background: radial-gradient(circle at 30% 30%, var(--color-accent-3), var(--color-contrast));
    box-shadow: 0 12px 26px rgba(80, 58, 168, 0.28);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text strong {
    font-size: 1rem;
    text-transform: uppercase;
}

.logo-text span {
    font-size: 0.75rem;
    color: var(--color-accent-4);
    letter-spacing: 0.12em;
}

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

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 30%, transparent);
    background: color-mix(in srgb, var(--color-accent-2) 60%, var(--color-base));
    color: var(--color-contrast);
    font-weight: 600;
    cursor: pointer;
}

.nav-toggle svg {
    width: 18px;
    height: 18px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-menu li::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.6rem;
    width: 100%;
    height: 2px;
    background: transparent;
    transition: background 0.2s ease;
}

.nav-menu li:hover::after,
.nav-menu li:focus-within::after,
.nav-menu li.active::after {
    background: var(--color-accent-1);
}

.site-main {
    display: block;
}

.hero {
    position: relative;
    overflow: hidden;
    background: var(--color-base);
    padding: var(--space-xl) 0 var(--space-lg);
    border-radius: 0 0 var(--radius-large) var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(0);
    opacity: 0.35;
}

.hero::before {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--color-accent-2), transparent 65%);
    top: -220px;
    right: -120px;
}

.hero::after {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, var(--color-accent-1), transparent 70%);
    bottom: -180px;
    left: -120px;
}

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

.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 4.8vw, 3.75rem);
    margin: 0 0 var(--space-sm);
    letter-spacing: 0.03em;
}

.hero p {
    font-size: 1.1rem;
    max-width: 640px;
    color: color-mix(in srgb, var(--color-contrast) 80%, #ffffff);
}

.hero-actions {
    margin-top: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn.primary {
    background: var(--color-accent-3);
    color: var(--color-base);
    box-shadow: 0 18px 42px rgba(80, 58, 168, 0.3);
}

.btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(80, 58, 168, 0.35);
}

.btn.secondary {
    background: var(--color-accent-2);
    color: var(--color-contrast);
    border-color: color-mix(in srgb, var(--color-accent-3) 20%, transparent);
}

.btn.secondary:hover {
    transform: translateY(-2px);
}

.btn.ghost {
    background: transparent;
    color: var(--color-accent-3);
    border-color: color-mix(in srgb, var(--color-accent-3) 30%, transparent);
}

.section-block,
.highlight,
.category-preview,
.testimonials,
.product-section,
.cta-banner,
.feature-panels,
.relx-series,
.relx-flavors,
.guide-section,
.contact-section,
.map-section {
    padding: var(--space-lg) 0;
}

.highlight .grid,
.category-preview .grid,
.product-section .grid,
.relx-flavors .grid,
.contact-section .grid,
.guide-section .grid {
    display: grid;
    gap: var(--space-sm);
}

.highlight .grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.highlight article {
    background: var(--color-base);
    padding: var(--space-md);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
}

.highlight h2 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.category-preview {
    background: var(--color-base);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.category-preview h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.category-preview .card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: color-mix(in srgb, var(--color-accent-2) 25%, var(--color-base));
    border-radius: var(--radius-medium);
    padding: var(--space-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 10%, transparent);
}

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

.testimonials {
    background: var(--color-accent-2);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.testimonials h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.testimonials .grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.testimonials blockquote {
    margin: 0;
    background: var(--color-base);
    padding: var(--space-md);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    border-left: 6px solid var(--color-accent-3);
    font-style: italic;
}

.testimonials cite {
    display: block;
    margin-top: var(--space-xs);
    font-style: normal;
    color: var(--color-accent-4);
}

.page-hero {
    background: var(--color-base);
    padding: var(--space-lg) 0 var(--space-md);
    border-radius: 0 0 var(--radius-large) var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.page-hero h1 {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
}

.page-hero p {
    max-width: 640px;
    color: var(--color-accent-4);
    font-size: 1.05rem;
}

.product-section {
    background: transparent;
}

.product-section h2,
.relx-series h2,
.relx-flavors h2,
.contact-section h2,
.map-section h2,
.guide-section h2,
.highlight h2,
.category-preview h2,
.testimonials h2 {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.product-section .grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--color-base);
    padding: var(--space-md);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
}

.product-image.placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-2) 70%, var(--color-base)), color-mix(in srgb, var(--color-accent-1) 40%, var(--color-base)));
    display: grid;
    place-items: center;
    color: var(--color-accent-4);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-info h3 {
    margin: 0;
    font-size: 1.25rem;
}

.product-info p {
    margin: 0;
    color: var(--color-accent-4);
}

.product-info .price {
    font-weight: 700;
    color: var(--color-contrast);
    font-size: 1.1rem;
}

.cta-banner {
    position: relative;
    background: linear-gradient(120deg, var(--color-accent-3), #34257e);
    color: var(--color-base);
    text-align: center;
    border-radius: var(--radius-large);
    padding: var(--space-lg) 0;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 15% -30% auto;
    height: 140%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--color-accent-2) 70%, transparent), transparent 65%);
    opacity: 0.5;
}

.cta-banner .container {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
}

.cta-banner h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 0;
}

.cta-banner p {
    margin: 0;
    max-width: 640px;
    color: color-mix(in srgb, var(--color-base) 85%, transparent);
}

.feature-panels .container {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.feature-panels article {
    background: var(--color-base);
    padding: var(--space-md);
    border-radius: var(--radius-medium);
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
    box-shadow: var(--shadow-card);
}

.comparison-table {
    display: grid;
    gap: 1px;
    background: color-mix(in srgb, var(--color-accent-3) 25%, transparent);
    border-radius: var(--radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.comparison-table .row {
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 1.4fr;
    gap: 0;
    background: var(--color-base);
}

.comparison-table .row div {
    padding: 1rem 1.25rem;
    border-left: 1px solid color-mix(in srgb, var(--color-accent-3) 10%, transparent);
}

.comparison-table .row div:first-child {
    border-left: none;
    font-weight: 600;
}

.comparison-table .row.header {
    background: color-mix(in srgb, var(--color-accent-2) 70%, var(--color-base));
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.flavor-card {
    background: var(--color-base);
    border-radius: var(--radius-medium);
    padding: var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
    box-shadow: var(--shadow-card);
}

.guide-section .grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.guide-section article {
    background: var(--color-base);
    padding: var(--space-md);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
}

.checklist {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
    display: grid;
    gap: 0.75rem;
}

.checklist li {
    position: relative;
    padding-left: 1.75rem;
}

.checklist li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent-3);
    font-weight: 700;
}

.accordion {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.accordion details {
    background: var(--color-base);
    border-radius: var(--radius-small);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
    box-shadow: var(--shadow-card);
}

.accordion summary {
    cursor: pointer;
    font-weight: 600;
    outline: none;
}

.accordion summary::marker {
    color: var(--color-accent-3);
}

.contact-section .grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.contact-list {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.contact-form {
    display: grid;
    gap: 0.75rem;
    background: var(--color-base);
    padding: var(--space-md);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
}

.contact-form label {
    font-weight: 600;
    font-size: 0.95rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-accent-3) 18%, transparent);
    font-family: var(--font-sans);
    font-size: 1rem;
    background: color-mix(in srgb, var(--color-base) 90%, var(--color-accent-2));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form textarea {
    min-height: 150px;
    border-radius: var(--radius-small);
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent-3);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-3) 20%, transparent);
}

.map-section {
    background: var(--color-base);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.map-placeholder {
    margin-top: var(--space-sm);
    border-radius: var(--radius-medium);
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-accent-2) 60%, var(--color-base)), color-mix(in srgb, var(--color-accent-2) 60%, var(--color-base)) 18px, color-mix(in srgb, var(--color-accent-1) 40%, var(--color-base)) 18px, color-mix(in srgb, var(--color-accent-1) 40%, var(--color-base)) 36px);
    aspect-ratio: 16 / 9;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-3) 20%, transparent);
}

.site-footer {
    background: var(--color-contrast);
    color: var(--color-base);
    padding: var(--space-lg) 0;
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    margin-top: var(--space-xl);
}

.site-footer .container {
    display: grid;
    gap: var(--space-md);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.footer-brand .logo-mark {
    width: 40px;
    height: 40px;
    box-shadow: none;
    background: radial-gradient(circle at 30% 30%, var(--color-accent-1), var(--color-accent-3));
}

.footer-brand .logo-text {
    color: var(--color-base);
}

.footer-columns {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.footer-columns ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.footer-columns h3 {
    margin-top: 0;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-columns a {
    color: color-mix(in srgb, var(--color-base) 85%, transparent);
}

.footer-columns a:hover {
    color: var(--color-accent-1);
}

.subscribe-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subscribe-form input {
    flex: 1 1 200px;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-accent-1) 40%, transparent);
    background: color-mix(in srgb, var(--color-base) 92%, var(--color-contrast));
    color: var(--color-contrast);
}

.subscribe-form button {
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    border: none;
    background: var(--color-accent-1);
    color: var(--color-contrast);
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.subscribe-form button:hover {
    background: color-mix(in srgb, var(--color-accent-1) 85%, #ffffff);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 960px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav-menu {
        position: absolute;
        inset: calc(100% + 0.75rem) 1.5rem auto;
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-sm);
        background: var(--color-base);
        border-radius: var(--radius-medium);
        box-shadow: var(--shadow-card);
        border: 1px solid color-mix(in srgb, var(--color-accent-3) 12%, transparent);
        display: none;
    }

    .nav-menu.open {
        display: flex;
    }
}

@media (max-width: 720px) {
    .hero {
        border-radius: 0;
    }

    .hero::before {
        width: 320px;
        height: 320px;
        top: -140px;
        right: -140px;
    }

    .hero::after {
        width: 260px;
        height: 260px;
        bottom: -140px;
        left: -160px;
    }

    .category-preview,
    .testimonials,
    .map-section {
        border-radius: var(--radius-medium);
    }

    .comparison-table .row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 520px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    .cta-banner h2 {
        font-size: 2.2rem;
    }

    .nav-menu {
        inset: calc(100% + 0.75rem) 1rem auto;
    }

    .subscribe-form {
        flex-direction: column;
        align-items: stretch;
    }

    .subscribe-form button {
        width: 100%;
    }
}