:root {
  color-scheme: light;
  --ink: #212721;
  --muted: #7d827c;
  --green: #344d3b;
  --green-dark: #263c2e;
  --lime: #d9ec73;
  --cream: #f7f6f1;
  --line: #e8e8e1;
  --orange: #f6a35d;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #d9dcdf; color: var(--ink); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.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; }

.site-header { position: sticky; top: 0; z-index: 20; color: #f5f5ee; background: #202020; box-shadow: 0 4px 14px rgb(0 0 0 / 12%); }
.topbar { display: flex; align-items: center; gap: 25px; max-width: 1600px; min-height: 96px; padding: 16px 5.3%; margin: auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -1.5px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50% 50% 50% 12%; transform: rotate(-8deg); background: var(--lime); color: var(--green-dark); font-family: Georgia, serif; font-size: 24px; font-weight: 700; font-style: italic; }
.brand-dot { color: var(--lime); }
.delivery-location { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 7px 0 7px 3px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.location-pin { color: var(--lime); font-size: 25px; line-height: 1; }
.delivery-location span:last-child, .header-link span:last-child { display: grid; gap: 1px; }
.delivery-location small, .header-link small { color: #c2c8bf; font-size: 10px; line-height: 1.25; }
.header-link .account-greeting { color: var(--lime); font-size: 13px; font-weight: 700; line-height: 1.25; }
.delivery-location strong, .header-link strong { color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.search { display: flex; height: 43px; flex: 1 1 auto; min-width: 160px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #fff; }
.search:focus-within { border-color: var(--lime); box-shadow: 0 0 0 2px rgb(217 236 115 / 20%); }
.search select { max-width: 100px; padding: 0 10px; border: 0; border-right: 1px solid #e5e5e0; outline: 0; background: #f5f5f1; color: #565e56; font-size: 11px; }
.search input { width: 100%; min-width: 0; padding: 0 13px; border: 0; outline: 0; color: var(--ink); font-size: 12px; }
.search input::placeholder { color: #9b9f99; }
.search-button { display: grid; place-items: center; width: 49px; flex: 0 0 49px; border: 0; background: var(--lime); cursor: pointer; }
.search-button:hover { background: #cfe363; }
.search-button svg { width: 19px; fill: none; stroke: var(--green-dark); stroke-linecap: round; stroke-width: 2; }
.header-link { display: flex; align-items: center; gap: 7px; padding: 5px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.header-icon { color: var(--lime); font-size: 19px; }
.account-avatar { display: block; width: 32px; height: 32px; flex: 0 0 32px; border: 2px solid rgb(217 236 115 / 75%); border-radius: 50%; object-fit: cover; }
.cart-button { position: relative; display: flex; align-items: flex-end; gap: 5px; padding: 4px 0; border: 0; background: none; color: #fff; cursor: pointer; }
.cart-button:hover { color: var(--lime); }
.cart-button strong { padding-bottom: 2px; font-size: 12px; }
.cart-icon { font-size: 22px; filter: grayscale(1) brightness(0) invert(1); }
.cart-count { position: absolute; top: -3px; left: 12px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 12px; background: var(--lime); color: var(--green-dark); font-size: 10px; font-weight: 800; }
.category-nav { border-top: 1px solid rgb(255 255 255 / 9%); background: #72add4; }
.nav-inner { display: flex; align-items: center; max-width: 1600px; min-height: 58px; padding: 0 5.3%; margin: auto; }
.nav-links { display: flex; flex: 1; align-items: center; gap: clamp(15px, 2.6vw, 37px); }
.nav-inner a, .all-menu { color: #18354a; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav-inner a { transition: color .2s; }
.nav-inner a:hover { color: #075182; }
.all-menu { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; }
.all-menu span { font-size: 15px; }
.nav-promo { margin-left: auto; color: #173c55; font-size: 10px; font-weight: 700; white-space: nowrap; }
.mobile-account-nav { display: none; }

main { max-width: 1600px; padding: 0 5.3%; margin: 0 auto; }
main [id] { scroll-margin-top: 190px; }
.hero { position: relative; width: 100%; min-height: 580px; overflow: hidden; margin: 26px 0 0; border-radius: 10px; background: #e8ebd9; isolation: isolate; }
.hero-slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .65s ease, visibility .65s; }
.hero-slide.is-active { z-index: 1; visibility: visible; opacity: 1; }
.hero-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.hero-slide-overlay { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgb(247 246 241 / 98%) 0%, rgb(247 246 241 / 94%) 31%, rgb(247 246 241 / 76%) 46%, rgb(247 246 241 / 17%) 72%, rgb(247 246 241 / 0%) 100%); }
.hero-content { width: 56%; padding: 44px 0 60px 7.1%; }
.eyebrow, .section-kicker { margin: 0 0 11px; color: #71806c; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #596b53; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #e9945a; }
.hero h1, .hero-title { margin: 0; color: #2c4132; font-family: Georgia, "Times New Roman", serif; font-size: clamp(39px, 5.4vw, 68px); font-weight: 500; letter-spacing: -2.8px; line-height: .99; }
.hero-description { max-width: 345px; margin: 17px 0 22px; color: #69766a; font-size: 13px; line-height: 1.7; }
.hero-cta { display: inline-flex; align-items: center; gap: 21px; padding: 12px 17px; border-radius: 4px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; transition: background .2s, transform .2s; }
.hero-cta:hover { transform: translateY(-2px); background: #1e3526; }
.hero-cta span { color: var(--lime); font-size: 16px; }
.hero-carousel-controls { position: absolute; right: 24px; bottom: 20px; left: 7.1%; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.hero-pagination { display: flex; gap: 7px; }
.hero-pagination button { display: grid; width: 25px; height: 28px; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-pagination button span { width: 7px; height: 7px; border-radius: 8px; background: #9aa397; transition: width .25s, background .25s; }
.hero-pagination button.active span { width: 24px; background: var(--green); }
.hero-pagination button:focus-visible, .hero-arrow:focus-visible { outline: 2px solid #18354a; outline-offset: 3px; }
.hero-carousel-navigation { display: flex; align-items: center; gap: 8px; }
.hero-arrow { position: absolute; top: 50%; z-index: 3; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgb(44 65 50 / 22%); border-radius: 50%; background: rgb(255 255 255 / 78%); color: #2c4132; font-size: 19px; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: background .2s, color .2s; }
.hero-arrow-prev { left: 16px; }
.hero-arrow-next { right: 16px; }
.hero-arrow:hover { background: var(--green); color: #fff; }
.hero-slide-number { margin-right: 4px; color: #2c4132; font-size: 11px; font-weight: 800; }
.hero-slide-number i { color: #727c70; font-size: 9px; font-style: normal; }
.hero-slide .eyebrow, .hero-slide .hero-description { text-shadow: 0 1px 12px rgb(255 255 255 / 45%); }
.hero-slide .hero-cta { box-shadow: 0 4px 16px rgb(31 46 34 / 15%); }

.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 23px 4px 25px; border-bottom: 1px solid var(--line); }
.benefit { display: flex; align-items: center; justify-content: center; gap: 10px; }
.benefit-icon { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border-radius: 50%; background: #f0f2e9; color: #566d50; font-size: 17px; }
.benefit > span:last-child { display: grid; gap: 4px; }
.benefit strong { font-size: 10px; font-weight: 700; }
.benefit small { color: var(--muted); font-size: 9px; }

.section { padding-top: 42px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.section-kicker { margin-bottom: 7px; font-size: 9px; }
.section-heading h2, .newsletter h2 { margin: 0; color: #29372d; font-family: Georgia, "Times New Roman", serif; font-size: 29px; font-weight: 500; letter-spacing: -.7px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; color: #56694f; font-size: 11px; font-weight: 700; }
.text-link span { font-size: 15px; transition: transform .2s; }
.text-link:hover span { transform: translateX(3px); }
.category-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.category-card { position: relative; display: flex; min-height: 166px; overflow: hidden; border-radius: 7px; transition: transform .2s, box-shadow .2s; }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgb(37 48 38 / 9%); }
.category-home { background: #f0e8dd; }
.category-tech { background: #e0e9e4; }
.category-fashion { background: #eee3dc; }
.category-leisure { background: #e8ebd7; }
.category-sport { background: #dde8ee; }
.category-care { background: #f1e1e6; }
.sport-ball, .care-drop { display: grid; place-items: center; width: 100%; height: 100%; font-size: 56px; }
.category-visual { position: absolute; inset: 0; overflow: hidden; }
.category-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(247 246 241 / 97%) 0%, rgb(247 246 241 / 86%) 30%, rgb(247 246 241 / 35%) 57%, rgb(247 246 241 / 0%) 100%); content: ""; }
.category-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transition: transform .4s ease; }
.category-card .category-visual img { transform: scale(1.14); }
.category-card:hover .category-visual img { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .category-card .category-visual img { transform: none; transition: none; }
  .category-card:hover .category-visual img { transform: none; }
}
.category-label { position: relative; z-index: 2; align-self: end; padding: 0 0 17px 17px; }
.category-label strong { display: block; margin-bottom: 4px; color: #2f3d32; font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.category-label small { color: #757d71; font-size: 9px; }
.category-arrow { position: absolute; top: 12px; right: 13px; z-index: 3; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgb(66 81 64 / 17%); border-radius: 50%; color: #52644f; font-size: 13px; transition: background .2s; }
.category-card:hover .category-arrow { background: #fff; }
.home-sun { position: absolute; top: 20px; right: 11px; width: 76px; height: 76px; border-radius: 50%; background: #e6bd8d; }
.home-vase { position: absolute; right: 38px; bottom: 15px; z-index: 1; display: grid; width: 44px; height: 74px; place-items: start center; padding-top: 6px; border-radius: 45% 45% 20% 20%; background: #af765c; color: #ebcf9e; font-size: 19px; }
.home-vase::before { position: absolute; top: -6px; width: 14px; height: 10px; background: #af765c; content: ""; }
.tech-disc { position: absolute; top: 33px; right: 10px; width: 81px; height: 81px; border: 11px solid #526c61; border-radius: 50%; background: #c2d1c8; box-shadow: inset 0 0 0 2px #dce6dd, 0 10px 20px rgb(41 67 52 / 15%); }
.tech-phone { position: absolute; right: 66px; bottom: 14px; width: 34px; height: 64px; border: 4px solid #465f54; border-radius: 8px; background: #a9beb3; transform: rotate(-9deg); }
.fashion-bag { position: absolute; right: 17px; bottom: 20px; display: grid; width: 72px; height: 69px; place-items: center; border-radius: 5px 5px 11px 11px; background: #c47e64; color: #efd8b1; font-size: 21px; box-shadow: 0 10px 19px rgb(72 48 39 / 15%); }
.fashion-bag::before { position: absolute; top: -24px; width: 30px; height: 29px; border: 5px solid #a66b55; border-bottom: 0; border-radius: 18px 18px 0 0; content: ""; }
.leisure-ball { position: absolute; top: 34px; right: 17px; width: 70px; height: 70px; border-radius: 50%; background: repeating-linear-gradient(45deg, #e0b66e 0 8px, #e7ca8d 8px 14px); box-shadow: 0 10px 18px rgb(75 73 42 / 15%); }
.leisure-leaf { position: absolute; right: 68px; bottom: 22px; color: #73805d; font-size: 38px; transform: rotate(-18deg); }

.products-section { padding-top: 48px; }
.product-heading { align-items: end; margin-bottom: 17px; }
.catalog-disclaimer { padding: 10px 12px; margin: -4px 0 16px; border-left: 3px solid #8da47d; background: #f5f7f1; color: #697269; font-size: 10px; line-height: 1.5; }
.product-controls { display: flex; gap: 6px; }
.filter-chip { padding: 7px 11px; border: 1px solid #e6e8df; border-radius: 20px; background: #fff; color: #70766e; font-size: 9px; cursor: pointer; transition: all .2s; }
.filter-chip:hover, .filter-chip.active { border-color: var(--green); background: var(--green); color: #fff; }
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #ecece6; border-radius: 7px; background: #fff; transition: transform .2s, box-shadow .2s; }
.product-card:hover { z-index: 1; transform: translateY(-3px) scale(1.06); box-shadow: 0 15px 30px rgb(38 51 39 / 13%); }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { transform: translateY(-3px) scale(1.1); }
}
.product-image-wrap { position: relative; display: grid; height: 220px; place-items: center; overflow: hidden; background: #f6f6f2; }
.product-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-badge { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border-radius: 3px; background: #e8edda; color: #52674a; font-size: 8px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.favorite-button { position: absolute; top: 8px; right: 9px; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / 90%); color: #849080; font-size: 17px; cursor: pointer; transition: color .2s, transform .2s; }
.favorite-button:hover, .favorite-button.is-favorite { color: #d6735d; transform: scale(1.08); }
.product-info { padding: 13px 12px 12px; }
.product-category { margin: 0 0 6px; color: #8b9288; font-size: 8px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.product-name { min-height: 42px; margin: 0; color: #303930; font-size: 14px; font-weight: 600; line-height: 1.5; }
.product-rating { display: flex; align-items: center; gap: 5px; margin: 7px 0; color: #e5a64f; font-size: 10px; letter-spacing: 1px; }
.product-rating small { color: #959b93; font-size: 9px; letter-spacing: 0; }
.product-rating-unrated { margin: 7px 0; color: #858b82; font-size: 9px; }
.product-rating-form { padding: 16px 0; margin: 16px 0; border-top: 1px solid #eceee8; border-bottom: 1px solid #eceee8; }
.product-rating-form h2 { margin: 0 0 10px; color: #3c473b; font-size: 14px; }
.product-rating-form > p { margin: 8px 0 0; color: #727a70; font-size: 11px; }
.product-rating-form > p a { color: #486443; font-weight: 700; text-decoration: underline; }
.rating-stars { display: block; padding: 0; margin: 8px 0; border: 0; }
.rating-stars legend { margin-bottom: 6px; color: #727a70; font-size: 10px; }
.rating-star-list { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
.rating-star { position: relative; color: #c9cfc4; font-size: 27px; line-height: 1; cursor: pointer; }
.rating-star:has(input:checked), .rating-star:has(input:checked) ~ .rating-star { color: #e5a64f; }
.rating-star input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rating-star span { display: block; }
.rating-star:hover, .rating-star:hover ~ .rating-star { color: #e5a64f; }
.rating-star input:focus-visible + span { outline: 2px solid #344d3b; outline-offset: 2px; }
.product-rating-form .auth-submit { width: 100%; }
.product-buy-row { display: grid; gap: 9px; margin-top: 9px; }
.product-price { color: #2e3e30; font-size: 14px; font-weight: 800; }
.product-price small { margin-left: 4px; color: #a0a49c; font-size: 9px; font-weight: 500; text-decoration: line-through; }
.add-button { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 0; border-radius: 50%; background: var(--green); color: white; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s; }
.add-button:hover { transform: rotate(90deg); background: #63805c; }
.product-buy-row .add-button { display: inline-flex; width: 100%; height: 40px; align-items: center; justify-content: center; padding: 0 15px; border-radius: 5px; background: #000; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; transition: background .2s, color .2s; }
.product-buy-row .add-button:hover, .product-buy-row .add-button:focus-visible { transform: none; background: #ffd21f; color: #000; }
.empty-state { padding: 38px 0; color: var(--muted); text-align: center; font-size: 13px; }

.newsletter { position: relative; display: grid; grid-template-columns: 50px 1fr minmax(260px, .9fr); align-items: center; gap: 21px; margin: 53px 0 28px; padding: 27px 32px; border-radius: 8px; background: #edf0e5; }
.newsletter-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #dfe8cf; color: #657b5c; font-size: 26px; }
.newsletter .section-kicker { margin-bottom: 7px; }
.newsletter h2 { font-size: 21px; }
.newsletter > div:nth-child(2) > p:last-child { margin: 7px 0 0; color: #737c6f; font-size: 10px; }
.newsletter-form { position: relative; display: flex; height: 40px; overflow: visible; border: 1px solid #dce0d5; border-radius: 4px; background: #fff; }
.newsletter-form input { width: 100%; min-width: 0; padding: 0 11px; border: 0; border-radius: 4px 0 0 4px; outline: 0; color: var(--ink); font-size: 10px; }
.newsletter-form button { padding: 0 12px; border: 0; border-radius: 0 3px 3px 0; background: var(--green); color: #fff; font-size: 9px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.newsletter-form button span { margin-left: 6px; color: var(--lime); font-size: 14px; }
.newsletter-message { position: absolute; top: calc(100% + 5px); left: 0; color: #526b4d; font-size: 9px; }

.home-style-refresh .hero { box-shadow: 0 16px 38px rgb(38 51 39 / 10%); }
.home-style-refresh .categories-section { padding: 24px; margin-top: 30px; border: 1px solid #edf0e8; border-radius: 12px; background: linear-gradient(135deg, #f8f8f3, #f0f4eb); }
.home-style-refresh .category-card { border: 1px solid rgb(48 64 52 / 6%); box-shadow: 0 5px 14px rgb(38 51 39 / 6%); transition: transform .2s, box-shadow .2s; }
.home-style-refresh .category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 23px rgb(38 51 39 / 12%); }
.home-style-refresh .product-card { border-color: #e9ece4; border-radius: 9px; box-shadow: 0 3px 12px rgb(38 51 39 / 4%); }
.home-style-refresh .product-card:hover { box-shadow: 0 12px 24px rgb(38 51 39 / 12%); }
.home-style-refresh .benefits { padding: 23px 15px; margin-top: 32px; border: 1px solid #edf0e8; border-radius: 10px; background: #fafbf8; }
.home-style-refresh .newsletter { box-shadow: 0 8px 24px rgb(38 51 39 / 6%); }
@media (max-width: 760px) {
  .home-style-refresh .categories-section { padding: 17px; margin-top: 22px; }
  .home-style-refresh .benefits { padding: 18px 12px; margin-top: 24px; }
}

.site-footer { display: flex; align-items: center; gap: 20px; min-height: 120px; padding: 0 5.3%; border-top: 1px solid #242424; background: #000; color: #c2c2c2; }
.footer-brand { color: #fff; font-size: 19px; }
.footer-brand .brand-mark { width: 26px; height: 26px; font-size: 19px; }
.footer-brand .brand-dot { color: #c2c2c2; }
.site-footer p { margin: 0; font-size: 10px; }
.site-footer > span:last-child { margin-left: auto; font-size: 9px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 10; padding: 12px 17px; border-radius: 5px; background: #26382d; color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.cart-auth-dialog { position: fixed; width: min(440px, calc(100% - 32px)); padding: 30px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 20px 70px rgb(15 25 18 / 25%); }
.cart-auth-dialog::backdrop { background: rgb(20 28 22 / 58%); backdrop-filter: blur(3px); }
.cart-auth-dialog h2 { margin: 0; color: #2c4132; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 500; line-height: 1.15; }
.cart-auth-dialog > p:not(.section-kicker) { margin: 12px 0 20px; color: #69766a; font-size: 13px; line-height: 1.6; }
.cart-auth-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f2f3ef; color: #485348; font-size: 23px; cursor: pointer; }
.cart-auth-actions { display: grid; gap: 10px; }
.cart-auth-actions .auth-submit { display: flex; align-items: center; justify-content: center; min-height: 43px; margin: 0; }
.cart-auth-register { display: flex; min-height: 43px; align-items: center; justify-content: center; border: 1px solid #dfe2d9; border-radius: 4px; color: #344d3b; font-size: 12px; font-weight: 700; }
.cart-auth-register:hover { background: #f7f8f4; }
.cart-page { min-height: 55vh; padding: 42px 0 68px; }
.cart-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.cart-page-heading h1 { margin: 0; color: #29372d; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4vw, 44px); font-weight: 500; }
.cart-page-heading p:not(.section-kicker) { margin: 8px 0 0; color: #727a70; font-size: 12px; }
.cart-continue-link { color: #56734c; font-size: 11px; font-weight: 700; }
.cart-continue-link:hover, .cart-remove:hover { text-decoration: underline; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 26px; padding-top: 24px; }
.cart-items { min-width: 0; }
.cart-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item-image { display: block; width: 110px; height: 110px; overflow: hidden; border-radius: 6px; background: #f6f6f2; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-info .product-category { margin: 0 0 4px; }
.cart-item-info h2 { margin: 0 0 7px; font-size: 14px; font-weight: 700; }
.cart-item-info h2 a:hover { color: #56734c; }
.cart-item-price { color: #344d3b; font-size: 13px; }
.cart-item-subtotal { min-width: 84px; color: #344d3b; font-size: 13px; text-align: right; }
.cart-item-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cart-quantity { display: inline-flex; min-height: 31px; align-items: center; border: 1px solid #dfe2d9; border-radius: 4px; }
.cart-quantity button { width: 31px; height: 29px; border: 0; background: #f7f8f4; color: #344d3b; font-size: 17px; cursor: pointer; }
.cart-quantity button:disabled, [data-cart-remove]:disabled { opacity: .55; cursor: wait; }
.cart-quantity span { min-width: 32px; color: #354035; font-size: 11px; text-align: center; }
.cart-remove { padding: 4px 0; border: 0; background: transparent; color: #777f74; font-size: 10px; cursor: pointer; }
.cart-summary { position: sticky; top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.cart-summary h2 { margin: 0 0 18px; color: #2c4132; font-size: 15px; }
.cart-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); color: #697269; font-size: 11px; }
.cart-summary > div strong { color: #2e3e30; font-size: 15px; }
.cart-summary > p { color: #858b82; font-size: 10px; line-height: 1.5; }
.cart-summary form { margin: 14px 0 8px; }
.cart-checkout-button { width: 100%; min-height: 42px; margin-top: 10px; border: 0; border-radius: 4px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.cart-checkout-button:hover { background: var(--green-dark); }
.cart-summary > small { display: block; margin-top: 9px; color: #858b82; font-size: 9px; text-align: center; }
.checkout-notice { padding: 12px 14px; border: 1px solid #ead6a2; border-radius: 5px; background: #fff9e9; color: #725919; font-size: 13px; }
.checkout-result { display: grid; min-height: 48vh; justify-items: center; align-content: center; gap: 12px; padding: 50px 18px; text-align: center; }
.checkout-result-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: #e8f1e2; color: #496541; font-size: 30px; font-weight: 700; }
.checkout-result-icon.is-error { background: #fff0ed; color: #9b4635; }
.checkout-result h1 { margin: 0; color: #304034; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 5vw, 40px); font-weight: 500; }
.checkout-result > p:not(.section-kicker) { max-width: 520px; color: #70786e; line-height: 1.7; }
.cart-empty { display: grid; justify-items: center; padding: 65px 16px 80px; text-align: center; }
.cart-empty > span { font-size: 40px; }
.cart-empty h2 { margin: 14px 0 0; color: #2c4132; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 500; }
.cart-empty p { margin: 8px 0 20px; color: #727a70; font-size: 12px; }

@media (min-width: 1441px) {
  .site-footer { max-width: none; margin: 0; }
}
@media (max-width: 1050px) {
  .topbar { gap: 15px; padding-right: 4%; padding-left: 4%; }
  .delivery-location { display: none; }
  .nav-inner { gap: 20px; padding-right: 4%; padding-left: 4%; }
  main { padding-right: 4%; padding-left: 4%; }
  .hero { width: 100%; min-height: 530px; margin-right: 0; margin-left: 0; }
  .hero-content { padding-top: 48px; }
  .product-image-wrap { height: 180px; }
  .newsletter { grid-template-columns: 45px 1fr; }
  .newsletter-form { grid-column: 2; max-width: 430px; width: 100%; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 12px; padding: 12px 5%; }
  .brand { font-size: 21px; }
  .brand-mark { width: 29px; height: 29px; font-size: 21px; }
  .account-link, .orders-link { display: none; }
  .cart-button { margin-left: auto; }
  .search { order: 2; flex-basis: 100%; height: 40px; }
  .category-nav { overflow-x: auto; scrollbar-width: none; }
  .category-nav::-webkit-scrollbar { display: none; }
  .category-nav { position: relative; }
  .category-nav::after { display: none; }
  .nav-inner { width: max-content; min-width: 100%; gap: 21px; padding: 0 5%; }
  .nav-inner a, .all-menu { font-size: 14px; }
  .nav-promo { display: none; }
  main { padding: 0 5%; }
  .hero { width: 100%; min-height: 490px; margin: 17px 0 0; }
  .hero-slide-image { object-position: 58% center; }
  .hero-slide-overlay { background: linear-gradient(90deg, rgb(247 246 241 / 97%) 0%, rgb(247 246 241 / 88%) 43%, rgb(247 246 241 / 53%) 70%, rgb(247 246 241 / 12%) 100%); }
  .hero-content { width: 76%; padding: 38px 0 67px 56px; }
  .hero h1, .hero-title { font-size: clamp(38px, 8vw, 56px); }
  .hero-description { max-width: 280px; font-size: 12px; }
  .hero-carousel-controls { right: 14px; bottom: 12px; left: 56px; }
  .hero-carousel-navigation { gap: 5px; }
  .hero-arrow { width: 36px; height: 36px; font-size: 16px; }
  .hero-arrow-prev { left: 10px; }
  .hero-arrow-next { right: 10px; }
  .benefits { grid-template-columns: repeat(2, 1fr); gap: 19px 7px; padding: 20px 0; }
  .benefit { justify-content: flex-start; }
  .benefit-icon { width: 29px; height: 29px; flex-basis: 29px; font-size: 15px; }
  .benefit strong { font-size: 11px; }
  .benefit small { font-size: 10px; }
  .section { padding-top: 35px; }
  .section-heading h2 { font-size: 26px; }
  .category-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-card { min-height: 150px; }
  .products-section { padding-top: 37px; }
  .product-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .product-controls { max-width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .filter-chip { flex: 0 0 auto; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-image-wrap { height: clamp(150px, 38vw, 220px); }
  .product-category { font-size: 10px; }
  .product-name { font-size: 15px; }
  .product-rating { font-size: 12px; }
  .product-rating small { font-size: 10px; }
  .product-price { font-size: 14px; }
  .newsletter { grid-template-columns: 38px 1fr; gap: 13px; margin-top: 39px; padding: 23px 18px 30px; }
  .newsletter-mark { width: 36px; height: 36px; font-size: 22px; }
  .newsletter h2 { font-size: 18px; }
  .newsletter-form { grid-column: 1 / -1; max-width: none; }
  .site-footer { flex-wrap: wrap; gap: 8px 15px; padding: 18px 5%; }
  .site-footer p { flex-basis: calc(100% - 150px); }
  .site-footer > span:last-child { width: 100%; margin-left: 0; }
  .cart-page { padding-top: 30px; }
  .cart-layout { grid-template-columns: 1fr; gap: 20px; }
  .cart-summary { position: static; }
}
@media (max-width: 420px) {
  .hero { min-height: 460px; }
  .hero-slide-image { object-position: 61% center; }
  .hero-slide-overlay { background: linear-gradient(90deg, rgb(247 246 241 / 96%) 0%, rgb(247 246 241 / 88%) 55%, rgb(247 246 241 / 52%) 100%); }
  .hero-content { width: 91%; padding-top: 32px; padding-left: 46px; }
  .hero h1, .hero-title { font-size: clamp(34px, 9vw, 38px); letter-spacing: -1.8px; }
  .hero-description { max-width: 245px; font-size: 11px; }
  .hero-cta { gap: 10px; padding: 11px 12px; font-size: 10px; }
  .hero-carousel-controls { right: 10px; left: 46px; }
  .hero-carousel-navigation { gap: 4px; }
  .hero-arrow { width: 32px; height: 32px; font-size: 15px; }
  .hero-arrow-prev { left: 6px; }
  .hero-arrow-next { right: 6px; }
  .hero-slide-number { font-size: 10px; }
  .category-card { min-height: 137px; }
  .category-label { padding-left: 12px; }
  .category-label strong { font-size: 17px; }
  .category-label small { max-width: 95px; font-size: 9px; }
  .product-info { padding: 11px 9px; }
  .product-name { font-size: 15px; }
  .product-price { font-size: 14px; }
  .cart-page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .cart-item { grid-template-columns: 76px minmax(0, 1fr); gap: 11px; padding: 14px 0; }
  .cart-item-image { width: 76px; height: 88px; }
  .cart-item-subtotal { grid-column: 2; grid-row: 2; text-align: left; }
  .cart-item-info h2 { font-size: 12px; }
  .cart-item-actions { gap: 10px; }
}
@media (max-width: 520px) {
  .products-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .product-image-wrap { height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.brand { font-size: 20px; letter-spacing: -1px; }
.brand { width: fit-content; max-width: 100%; padding: 0; border-radius: 0; background: transparent; }
.brand-logo { display: block; width: clamp(225px, 21vw, 275px); height: auto; object-fit: contain; filter: drop-shadow(0 0 8px rgb(217 184 92 / 55%)); }
.footer-brand .brand-logo { width: 190px; }
.header-auth-form { margin: 0; }
.header-auth-link { padding: 5px 0; border: 0; background: none; color: #e5edda; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.header-auth-link:hover, .register-link:hover strong { color: var(--lime); }
.product-image-link { display: block; width: 100%; height: 100%; }
.product-name a:hover { color: #627b56; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 23px 0 18px; color: #81877e; font-size: 11px; }
.breadcrumbs a:hover { color: var(--green); text-decoration: underline; }
.breadcrumbs span:last-child { color: #39483a; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); align-items: start; gap: clamp(32px, 6vw, 78px); padding: 12px 0 62px; }
.detail-image-wrap { position: relative; min-height: 400px; overflow: hidden; border-radius: 9px; background: #f6f6f2; }
.detail-gallery-slide { width: 100%; height: 100%; }
.detail-gallery-slide[hidden] { display: none; }
.detail-image-wrap img { display: block; width: 100%; height: 100%; min-height: 400px; max-height: 580px; object-fit: contain; }
.detail-gallery-arrow { position: absolute; top: 50%; z-index: 2; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid rgb(44 65 50 / 18%); border-radius: 50%; background: rgb(255 255 255 / 88%); color: #304034; font-size: 30px; line-height: 1; cursor: pointer; }
.detail-gallery-arrow:hover { background: #fff; }
.detail-gallery-arrow.previous { left: 14px; }
.detail-gallery-arrow.next { right: 14px; }
.detail-gallery-controls { position: absolute; right: 0; bottom: 14px; left: 0; z-index: 2; display: flex; justify-content: center; gap: 7px; }
.detail-gallery-controls button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgb(48 64 52 / 38%); cursor: pointer; }
.detail-gallery-controls button.active { width: 22px; border-radius: 6px; background: #344d3b; }
.detail-gallery-controls button:focus-visible, .detail-gallery-arrow:focus-visible { outline: 2px solid #344d3b; outline-offset: 3px; }
.detail-gallery-counter { position: absolute; right: 14px; bottom: 13px; z-index: 2; padding: 4px 7px; border-radius: 12px; background: rgb(255 255 255 / 88%); color: #354035; font-size: 10px; }
.detail-image-wrap .product-badge { top: 16px; left: 16px; }
.detail-info { padding: 13px 0; }
.detail-info h1, .auth-card h1 { margin: 8px 0 12px; color: #29372d; font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 4vw, 42px); font-weight: 500; letter-spacing: -.8px; line-height: 1.15; }
.detail-info .product-rating { margin: 15px 0 18px; }
.detail-price { display: flex; align-items: center; gap: 11px; color: #2e3e30; font-size: 26px; font-weight: 800; }
.detail-price small { color: #92998e; font-size: 14px; font-weight: 500; text-decoration: line-through; }
.detail-description { margin: 19px 0; color: #697269; font-size: 16px; line-height: 1.85; white-space: pre-line; }
.detail-benefits { display: grid; gap: 10px; padding: 16px 0; margin: 0 0 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #596854; font-size: 11px; list-style: none; }
.detail-benefits li::before { margin-right: 9px; color: #77936b; content: "✓"; font-weight: 800; }
.detail-add-button { display: inline-flex; width: auto; min-width: 190px; height: 43px; align-items: center; justify-content: center; padding: 0 20px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.detail-add-button:hover { transform: none; background: #63805c; }
.detail-back { display: block; width: fit-content; margin-top: 18px; color: #64775d; font-size: 11px; font-weight: 700; }
.detail-back:hover { text-decoration: underline; }
.auth-page { display: grid; min-height: 470px; place-items: start center; padding: 52px 16px 64px; }
.auth-card { width: min(100%, 440px); padding: 33px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 38px rgb(38 51 39 / 6%); }
.auth-card h1 { margin-top: 8px; font-size: 32px; }
.auth-intro { margin: 0 0 22px; color: #727a70; font-size: 12px; line-height: 1.65; }
.auth-form { display: grid; gap: 9px; }
.auth-form label { margin-top: 5px; color: #424d42; font-size: 11px; font-weight: 700; }
.auth-form input, .auth-form select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #dfe2d9; border-radius: 4px; outline: 0; color: var(--ink); font-size: 12px; }
.auth-form input:focus, .auth-form select:focus { border-color: #819675; box-shadow: 0 0 0 3px rgb(129 150 117 / 14%); }
.phone-input-group { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 8px; }
.password-hint { color: #848b81; font-size: 10px; }
.auth-submit { min-height: 43px; margin-top: 10px; border: 0; border-radius: 4px; background: var(--green); color: white; font-size: 12px; font-weight: 700; cursor: pointer; }
.auth-submit:hover { background: var(--green-dark); }
.auth-switch { margin: 21px 0 0; color: #727a70; font-size: 11px; }
.auth-switch a { margin-left: 4px; color: #486443; font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }
.profile-photo { display: grid; width: 104px; height: 104px; place-items: center; overflow: hidden; margin: 0 auto 22px; border: 1px solid #dfe2d9; border-radius: 50%; background: #f2f5ec; color: #526b4d; font-size: 40px; font-weight: 700; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-form { padding-top: 20px; margin-top: 22px; border-top: 1px solid #eceee8; }
.form-error { padding: 11px 12px; border: 1px solid #efc7bd; border-radius: 4px; background: #fff4f1; color: #9b4635; font-size: 11px; line-height: 1.5; }
.form-success { padding: 11px 12px; border: 1px solid #d5e6cb; border-radius: 4px; background: #f2f8ee; color: #405d3d; font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  .account-link { display: flex; }
  .register-link { display: none; }
  .product-detail { grid-template-columns: 1fr; gap: 18px; padding-bottom: 40px; }
  .detail-image-wrap, .detail-image-wrap img { min-height: 270px; max-height: 400px; }
  .detail-info { padding-top: 0; }
  .detail-info h1 { font-size: 32px; }
  .auth-page { min-height: 400px; padding-top: 34px; }
  .auth-card { padding: 25px 20px; }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .topbar { display: grid; grid-template-columns: minmax(0, auto) minmax(180px, 1fr) auto; gap: 12px; }
  .delivery-location, .orders-link, .register-link { display: none; }
  .search { grid-column: 2; grid-row: 1; }
  .cart-button { grid-column: 3; grid-row: 1; }
  .category-nav .nav-inner { gap: 17px; }
  .nav-promo { display: none; }
  main { padding-right: 4%; padding-left: 4%; }
  .products-grid, .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-image-wrap { height: clamp(220px, 30vw, 300px); }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell { grid-template-columns: 185px minmax(0, 1fr); gap: 18px; }
  .admin-stats { gap: 10px; }
  .admin-stat-card { padding: 16px; }
}

.mobile-account-nav, .mobile-logout-nav { display: none; }
.admin-shortcut { margin: -6px 0 18px; text-align: right; }
.admin-shell {
  --admin-accent: #5b4a91;
  --admin-accent-dark: #443571;
  --admin-accent-soft: #f0edf8;
  --admin-border: #e7e1f0;
  --admin-ink: #332d43;
}
.admin-shortcut a, .admin-secondary-link, .admin-table-link { color: var(--admin-accent); font-size: 11px; font-weight: 700; }
.admin-shortcut a:hover, .admin-secondary-link:hover, .admin-table-link:hover { text-decoration: underline; }
.admin-shell { display: grid; width: calc(100vw - 48px); max-width: 1600px; grid-template-columns: 205px minmax(0, 1fr); align-items: start; gap: 24px; padding: 36px 0 64px; margin-left: calc((100% - min(1600px, 100vw - 48px)) / 2); }
.admin-sidebar { position: sticky; top: 18px; display: grid; gap: 7px; padding: 20px 13px; border: 1px solid var(--admin-border); border-radius: 12px; background: linear-gradient(160deg, #fff 0%, #f8f6fc 100%); box-shadow: 0 8px 24px rgb(54 42 81 / 7%); }
.admin-sidebar-label { padding: 0 10px; color: #969d91; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 11px; border: 1px solid transparent; border-radius: 7px; color: #706b7d; font-size: 12px; transition: background-color .18s, border-color .18s, color .18s; }
.admin-nav-link.active, .admin-nav-link:hover { border-color: #ddd4ee; background: var(--admin-accent-soft); color: var(--admin-accent-dark); font-weight: 700; }
.admin-content { display: grid; min-width: 0; gap: 21px; }
.admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 24px 27px; border: 1px solid var(--admin-border); border-radius: 12px; background: linear-gradient(115deg, #f0edf8 0%, #fbfaff 72%, #f7f4fb 100%); box-shadow: 0 8px 24px rgb(54 42 81 / 6%); }
.admin-page-heading h1 { margin: 0; color: var(--admin-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 3vw, 40px); font-weight: 500; letter-spacing: -.6px; }
.admin-page-heading p:last-child { margin: 7px 0 0; color: #788076; font-size: 11px; }
.admin-primary-link { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 17px; border: 0; border-radius: 6px; background: var(--admin-accent); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 10px rgb(68 53 113 / 19%); transition: background-color .18s, transform .18s, box-shadow .18s; }
.admin-primary-link:hover { transform: translateY(-1px); background: var(--admin-accent-dark); box-shadow: 0 6px 14px rgb(68 53 113 / 24%); }
.admin-revenue-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 19px 23px; border: 1px solid #ded5ef; border-radius: 11px; background: linear-gradient(110deg, #eee9f8 0%, #faf8fd 65%, #f2eff9 100%); box-shadow: 0 8px 24px rgb(54 42 81 / 7%); }
.admin-revenue-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; background: #5b4a91; color: #fff; font-size: 23px; font-weight: 700; }
.admin-revenue-copy { display: grid; gap: 4px; }
.admin-revenue-copy p { margin: 0; color: #443571; font-size: 14px; font-weight: 700; }
.admin-revenue-copy small { color: #777085; font-size: 10px; }
.admin-revenue-amount { color: #332d43; font-size: clamp(22px, 3vw, 31px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-revenue-count { padding: 7px 10px; border: 1px solid #ded5ef; border-radius: 20px; background: rgb(255 255 255 / 70%); color: #5b4a91; font-size: 10px; font-weight: 700; white-space: nowrap; }
.admin-revenue-buyers { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid #e4ddef; color: #4d3c7c; font-size: 11px; }
.admin-revenue-buyers summary { width: fit-content; font-weight: 700; cursor: pointer; }
.admin-revenue-buyers summary:focus-visible { outline: 2px solid #5b4a91; outline-offset: 3px; }
.admin-revenue-buyers ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 12px 0 0; margin: 0; list-style: none; }
.admin-revenue-buyers li { display: grid; gap: 3px; min-width: 0; padding: 9px 11px; border: 1px solid #e5dfef; border-radius: 7px; background: rgb(255 255 255 / 72%); }
.admin-revenue-buyers li strong { overflow-wrap: anywhere; color: #443571; }
.admin-revenue-buyers li span { overflow-wrap: anywhere; color: #777085; font-size: 10px; }
.admin-revenue-no-buyers { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid #e4ddef; color: #777085; font-size: 11px; }
.admin-revenue-delete-form { margin: 0; }
.admin-revenue-delete-form .admin-action-button { min-height: 38px; }
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-stat-card { position: relative; display: grid; gap: 9px; overflow: hidden; padding: 22px; border: 1px solid #e7e1f0; border-radius: 10px; background: linear-gradient(145deg, #fff 0%, #faf8fd 100%); box-shadow: 0 7px 22px rgb(54 42 81 / 6%); }
.admin-stat-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #7361a6; content: ""; }
.admin-stat-card:nth-child(2) { border-color: #d8e9e7; background: linear-gradient(145deg, #fff 0%, #f4faf9 100%); }
.admin-stat-card:nth-child(2)::before { background: #4c9b91; }
.admin-stat-card:nth-child(3) { border-color: #f0e4d1; background: linear-gradient(145deg, #fff 0%, #fdf8ef 100%); }
.admin-stat-card:nth-child(3)::before { background: #d69b4c; }
.admin-stat-card span { color: #716b7e; font-size: 10px; font-weight: 600; }
.admin-stat-card strong { color: var(--admin-ink); font-size: 32px; line-height: 1; }
.admin-stat-card small { color: #8d8798; font-size: 9px; }
.admin-panel { min-width: 0; padding: 24px; border: 1px solid #e7e1f0; border-radius: 11px; background: #fff; box-shadow: 0 7px 22px rgb(54 42 81 / 6%); scroll-margin-top: 16px; }
.admin-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.admin-panel-heading .section-kicker { margin-bottom: 5px; }
.admin-panel-heading h2 { margin: 0; color: var(--admin-ink); font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; }
.admin-panel-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--admin-accent-soft); color: var(--admin-accent); font-size: 19px; }
.admin-payment-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-payment-balance { display: grid; align-content: start; gap: 10px; padding: 16px; border: 1px solid #e7e1f0; border-radius: 8px; background: #faf8fd; }
.admin-payment-balance h3 { margin: 0; color: var(--admin-ink); font-size: 15px; }
.admin-payment-balance > div { display: flex; justify-content: space-between; gap: 12px; color: #70786e; font-size: 12px; }
.admin-payment-balance > div strong { color: var(--admin-ink); text-align: right; }
.admin-payment-balance p, .admin-payment-balance small { margin: 0; color: #70786e; font-size: 11px; line-height: 1.5; }
.admin-payment-balance .admin-payment-error { color: #9b4635; }
.paypal-checkout { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #e8e8e1; }
.paypal-checkout > p { margin: 0; color: #70786e; font-size: 11px; line-height: 1.5; }
#paypal-checkout-status:not(:empty) { color: #9b4635; }
.admin-orders-table { min-width: 950px; }
.admin-return-table { min-width: 1050px; }
.admin-return-form { display: grid; min-width: 180px; gap: 6px; }
.admin-return-form select, .admin-return-form textarea { width: 100%; padding: 7px; border: 1px solid #dfe2d9; border-radius: 4px; font: inherit; font-size: 10px; }
.admin-return-form textarea { resize: vertical; }
.admin-product-form { display: grid; gap: 16px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-hero-slides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-hero-slide-form { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #e7e1f0; border-radius: 8px; background: #faf8fd; }
.admin-hero-slide-form h3 { margin: 0; color: var(--admin-ink); font-size: 14px; }
.admin-hero-preview { width: 100%; height: 125px; }
.admin-hero-slide-form .admin-field textarea { min-height: 92px; resize: vertical; font-size: 14px; line-height: 1.4; }
.admin-hero-reset { display: flex; align-items: center; gap: 7px; color: #70786e; font-size: 10px; }
.admin-hero-reset input { accent-color: var(--admin-accent); }
.admin-field { display: grid; min-width: 0; gap: 6px; }
.admin-field-wide { grid-column: 1 / -1; }
.admin-field label { color: #485348; font-size: 10px; font-weight: 700; }
.admin-field label span { color: #959b92; font-weight: 400; }
.admin-field input, .admin-field select, .admin-field textarea { width: 100%; min-height: 39px; padding: 9px 10px; border: 1px solid #dfe2d9; border-radius: 4px; outline: 0; background: #fff; color: #354035; font: inherit; font-size: 11px; }
#admin-description { min-height: 320px; padding: 16px; color: #28342b; font-size: 28px; line-height: 1.65; }
.admin-field textarea { min-height: 220px; resize: vertical; line-height: 1.7; font-size: 18px; }
.admin-field input[type="file"] { padding: 7px; }
.admin-field > small { color: #7d827c; font-size: 10px; line-height: 1.5; }
.admin-image-preview { display: block; width: min(100%, 340px); max-height: 250px; border: 1px solid #e8ebe3; border-radius: 8px; background: #f7f8f4; object-fit: contain; }
.admin-gallery-previews { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-gallery-item { display: grid; justify-items: start; gap: 7px; color: #70786e; font-size: 11px; }
.admin-gallery-previews img { display: block; width: 160px; height: 120px; border: 1px solid #e5e8df; border-radius: 7px; background: #f6f6f2; object-fit: contain; }
.admin-gallery-item > span { display: inline-flex; align-items: center; gap: 6px; }
.admin-gallery-item input { width: 15px; min-height: 15px; accent-color: #a14a3d; }
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { border-color: #8a79b8; box-shadow: 0 0 0 3px rgb(91 74 145 / 14%); }
.admin-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid #eef0e9; }
.admin-form-actions > span { color: #92988e; font-size: 9px; }
.admin-notice { padding: 12px 14px; margin: 0; border-radius: 5px; font-size: 11px; line-height: 1.5; }
.admin-notice.success { border: 1px solid #d7e5c9; background: #f2f7ec; color: #496540; }
.admin-notice.error { border: 1px solid #efc7bd; background: #fff4f1; color: #9b4635; }
.admin-user-count { color: #858d81; font-size: 10px; }
.admin-table-wrap { width: 100%; overflow-x: auto; }
.admin-inventory-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.admin-inventory-filter label { color: #596454; font-size: 12px; font-weight: 700; }
.admin-inventory-filter select { min-width: 190px; min-height: 36px; padding: 0 30px 0 10px; border: 1px solid #dfe2d9; border-radius: 5px; background: #fff; color: #354035; font: inherit; font-size: 12px; }
.admin-inventory-filter select:focus-visible { outline: 2px solid #819675; outline-offset: 2px; }
.admin-inventory-filter span { margin-left: auto; color: #858d81; font-size: 11px; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th { padding: 10px 11px; border-bottom: 1px solid #e7e9e2; color: #8b9288; font-size: 9px; font-weight: 700; white-space: nowrap; }
.admin-table td { padding: 12px 11px; border-bottom: 1px solid #eff0eb; color: #70786e; font-size: 10px; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td strong { color: #3c473b; font-size: 16px; font-weight: 600; line-height: 1.5; }
.admin-orders-table { min-width: 950px; }
.admin-orders-table td strong { font-size: 12px; }
.admin-orders-table td span { color: #858d81; font-size: 10px; }
.admin-order-items { display: grid; gap: 5px; min-width: 210px; padding-left: 17px; margin: 0; color: #485348; font-size: 11px; line-height: 1.5; }
.admin-order-items span { color: #858d81; }
.order-status { display: inline-block; padding: 5px 8px; border-radius: 14px; font-size: 10px !important; font-weight: 700; white-space: nowrap; }
.order-status.is-paid { background: #edf3e8; color: #405b39; }
.order-status.is-pending { background: #fff4e5; color: #94621d; }
.admin-order-note { margin: 12px 0 0; color: #858d81; font-size: 10px; }
.admin-table-image { display: block; width: 320px; height: 210px; border: 1px solid #e8ebe3; border-radius: 8px; object-fit: contain; background: #f6f6f2; }
.admin-table-link { font-size: 10px; white-space: nowrap; }
.admin-product-actions { display: flex; align-items: center; gap: 8px; }
.admin-product-actions form { margin: 0; }
.admin-action-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid transparent; border-radius: 5px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; }
.admin-action-button:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgb(30 45 31 / 12%); text-decoration: none; }
.admin-action-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.admin-edit-button { border-color: #ddd4ee; background: #f0edf8; color: #4d3c7c; }
.admin-edit-button:hover { border-color: #c8bbe2; background: #e7e0f3; color: #382a61; }
.admin-delete-button { border-color: #efd7d2; background: #fff2ef; color: #a14a3d; }
.admin-delete-button:hover { border-color: #e5bdb4; background: #fce5e0; color: #7f3025; }
.role-badge { display: inline-block; padding: 4px 7px; border-radius: 20px; background: #f0f1ed; color: #73796f; font-size: 9px; white-space: nowrap; }
.role-badge.is-admin { background: #f0edf8; color: #4d3c7c; }
.admin-empty { padding: 22px !important; color: #92988e !important; text-align: center; }
.admin-message-compose { display: grid; gap: 10px; margin: 0 0 20px; padding: 16px; border: 1px solid #e7e9e2; border-radius: 6px; background: #fbfcf9; }
.admin-message-compose .admin-panel-heading { margin-bottom: 0; }
.admin-message-compose h3 { margin: 0; color: #304034; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 500; }
.admin-message-help { margin: 0; color: #70786e; font-size: 12px; line-height: 1.6; }
.admin-message-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-message-form .admin-field-wide { grid-column: 1 / -1; }
.admin-message-form .admin-form-actions { margin-top: 0; }
.messages-page { width: min(900px, 90%); min-height: 45vh; margin: 42px auto 64px; }
.orders-page { width: min(900px, 90%); min-height: 45vh; margin: 42px auto 64px; }
.orders-heading { margin-bottom: 24px; }
.orders-heading h1 { margin: 0; color: #304034; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 4vw, 40px); font-weight: 500; }
.orders-heading > p:last-child { color: #70786e; }
.orders-empty { padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.orders-empty h2 { margin: 0; color: #304034; font-size: 18px; }
.orders-empty p { margin: 9px 0 18px; color: #70786e; font-size: 13px; }
.orders-list { display: grid; gap: 16px; }
.customer-order { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.customer-order-heading, .customer-order-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-order-heading { padding-bottom: 14px; border-bottom: 1px solid #eff0eb; }
.customer-order-heading h2 { margin: 0 0 5px; color: #304034; font-size: 16px; }
.customer-order-heading time { color: #858d81; font-size: 11px; }
.customer-order-items { display: grid; gap: 10px; padding: 15px 0; margin: 0; list-style: none; }
.customer-order-items li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; color: #535b51; font-size: 13px; }
.customer-order-image, .customer-order-image-placeholder { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid #eff0eb; border-radius: 5px; background: #f6f6f2; color: #92998e; object-fit: contain; }
.customer-order-product { min-width: 0; }
.customer-order-items li strong { color: #3c473b; white-space: nowrap; }
.return-request-state, .return-request-form { grid-column: 2 / -1; color: #697269; font-size: 11px; }
.return-request-state { display: grid; gap: 4px; }
.return-request-state strong { color: #526b4d !important; font-size: 11px !important; white-space: normal !important; }
.return-request-form summary { width: fit-content; color: #486443; font-weight: 700; cursor: pointer; }
.return-request-form form { display: grid; gap: 7px; max-width: 420px; padding-top: 8px; }
.return-request-form label { color: #535b51; font-size: 11px; font-weight: 700; }
.return-request-form textarea { width: 100%; padding: 8px; border: 1px solid #dfe2d9; border-radius: 4px; font: inherit; font-size: 12px; resize: vertical; }
.return-request-form .auth-submit { width: fit-content; min-height: 36px; padding: 0 13px; margin-top: 0; }
.customer-order-empty { color: #858d81; font-size: 12px; }
.customer-order-total { padding-top: 13px; border-top: 1px solid #eff0eb; color: #3c473b; font-size: 13px; font-weight: 700; }
.orders-note { color: #858d81; font-size: 10px; }
.messages-heading { margin-bottom: 24px; }
.messages-heading h1 { margin: 0; color: #304034; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 4vw, 40px); font-weight: 500; }
.messages-heading > p:last-child { color: #70786e; }
.messages-empty { padding: 24px; border: 1px solid var(--line); border-radius: 8px; color: #70786e; }
.messages-list { display: grid; gap: 14px; }
.user-message { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.user-message-reply { margin: 16px 0 0 18px; padding: 14px; border-left: 3px solid #d8d0e8; background: #faf9fc; }
.user-message-reply strong { color: #5b4a91; font-size: 12px; }
.user-message-reply p { margin: 10px 0 0; color: #535b51; font-size: 13px; line-height: 1.7; }
.user-message-reply-form { display: grid; gap: 9px; margin: 18px 0 0; }
.user-message-reply-form label { color: #455144; font-size: 12px; font-weight: 700; }
.user-message-reply-form textarea { width: 100%; min-height: 82px; padding: 10px; border: 1px solid #dfe2d9; border-radius: 4px; color: #354035; font: inherit; font-size: 13px; resize: vertical; }
.user-message-reply-form .auth-submit { width: fit-content; min-height: 38px; margin-top: 0; }
.admin-message-replies { display: grid; gap: 12px; margin: 0 0 20px; padding: 16px; border: 1px solid #e7e9e2; border-radius: 6px; background: #fbfcf9; }
.admin-message-replies .admin-panel-heading { margin-bottom: 0; }
.admin-message-replies h3 { margin: 0; color: #304034; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 500; }
.admin-customer-replies { display: grid; gap: 10px; }
.admin-customer-reply { padding: 14px; border: 1px solid #e7e9e2; border-radius: 6px; background: #fff; }
.admin-customer-reply h4 { margin: 0; color: #304034; font-size: 13px; }
.admin-customer-reply h4 span { color: #7a8277; font-size: 11px; font-weight: 400; }
.admin-customer-reply time { color: #8b9288; font-size: 11px; white-space: nowrap; }
.admin-customer-reply > p:last-child { margin: 12px 0 0; color: #535b51; font-size: 13px; line-height: 1.7; }
.admin-message-original-subject { margin: 10px 0 0; color: #5b4a91; font-size: 11px; font-weight: 700; }
.admin-customer-reply-form { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0e9; }
.admin-customer-reply-form label { color: #455144; font-size: 11px; font-weight: 700; }
.admin-customer-reply-form textarea { width: 100%; min-height: 72px; padding: 9px; border: 1px solid #dfe2d9; border-radius: 4px; color: #354035; font: inherit; font-size: 12px; resize: vertical; }
.admin-customer-reply-form .admin-primary-link { justify-self: start; }
.user-message-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.user-message h2 { margin: 0; color: #304034; font-size: 17px; }
.user-message time { color: #8b9288; font-size: 11px; white-space: nowrap; }
.user-message-sender { margin: 10px 0 -7px !important; color: #5b4a91 !important; font-size: 11px; font-weight: 700; }
.user-message > p { margin: 14px 0 0; color: #535b51; font-size: 14px; line-height: 1.7; }

@media (max-width: 760px) {
  main [id] { scroll-margin-top: 205px; }
  .header-auth-form, .messages-header-link { display: none; }
  .admin-header-link { display: none; }
  .mobile-account-nav { display: inline; }
  .mobile-logout-nav { display: flex; align-items: center; margin: 0; }
  .mobile-logout-nav button { padding: 0; border: 0; background: none; color: #f2f2eb; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .topbar { gap: 10px; }
  .brand { max-width: 68%; padding: 0; }
  .brand-logo { width: clamp(165px, 45vw, 205px); height: auto; }
  .account-link { display: none !important; }
  .cart-button { margin-left: auto; }
  .admin-shell { width: 100%; grid-template-columns: 1fr; gap: 13px; padding-top: 20px; margin-left: 0; }
  .admin-sidebar { position: static; display: flex; gap: 5px; overflow-x: auto; padding: 8px; border-radius: 9px; }
  .admin-sidebar-label { display: none; }
  .admin-nav-link { flex: 0 0 auto; padding: 9px; font-size: 10px; }
  .admin-nav-link span { white-space: nowrap; }
  .admin-content { gap: 13px; }
  .admin-page-heading { align-items: flex-start; padding: 17px; }
  .admin-page-heading h1 { font-size: 27px; }
  .admin-primary-link { min-height: 36px; padding: 0 10px; font-size: 9px; }
  .admin-revenue-summary { grid-template-columns: auto minmax(0, 1fr); gap: 9px 12px; padding: 15px; }
  .admin-revenue-icon { grid-row: span 2; width: 38px; height: 38px; }
  .admin-revenue-amount { grid-column: 2; font-size: 26px; }
  .admin-revenue-count { grid-column: 1 / -1; justify-self: start; }
  .admin-revenue-delete-form { grid-column: 1 / -1; }
  .admin-revenue-delete-form .admin-action-button { width: 100%; white-space: normal; }
  .admin-stats { gap: 8px; }
  .admin-stat-card { gap: 6px; padding: 14px 10px 14px 13px; border-radius: 8px; }
  .admin-stat-card strong { font-size: 22px; }
  .admin-stat-card span { font-size: 9px; }
  .admin-stat-card small { font-size: 8px; }
  .admin-panel { padding: 17px 13px; border-radius: 9px; }
  .admin-panel-heading h2 { font-size: 19px; }
  .admin-hero-slides { grid-template-columns: 1fr; }
  .admin-inventory-filter { flex-wrap: wrap; }
  .admin-inventory-filter select { flex: 1 1 180px; }
  .admin-form-grid { gap: 11px 9px; }
  .admin-form-actions { align-items: flex-start; flex-direction: column; }
  .admin-message-form { grid-template-columns: 1fr; }
  .admin-message-form .admin-field-wide { grid-column: auto; }
  .admin-message-form .admin-primary-link { width: 100%; }
  .admin-table { min-width: 560px; }
  .admin-panel:last-child .admin-table { min-width: 630px; }
  .admin-table-image { width: 280px; height: 190px; }
  .admin-image-preview { width: min(100%, 300px); max-height: 220px; }
  .admin-gallery-previews img { width: 140px; height: 105px; }
}

@media (max-width: 760px) {
  html, body { width: 100%; min-width: 0; }
  .site-header, main, .site-footer { min-width: 0; }
  .topbar { width: 100%; min-width: 0; }
  .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .category-nav { max-width: 100%; overscroll-behavior-x: contain; }
  .nav-inner { max-width: 100%; }
  main { width: 100%; }
  .section-heading { min-width: 0; }
  .product-detail, .products-grid, .category-cards, .benefits, .newsletter, .admin-shell, .admin-content { min-width: 0; }
  .product-image, .detail-image-wrap img { max-width: 100%; }
  .newsletter-form input { min-width: 0; }
}

@media (max-width: 420px) {
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-stat-card { padding: 11px 7px; }
  .admin-page-heading { flex-direction: column; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-payment-balances { grid-template-columns: 1fr; }
  .admin-field-wide { grid-column: auto; }
  .admin-primary-link { width: 100%; }
  .admin-form-actions .admin-primary-link { width: 100%; }
}
@media (max-width: 360px) {
  .brand { max-width: 68%; }
  .brand-logo { width: 165px; height: auto; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .products-grid, .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-image-wrap { height: clamp(210px, 32vw, 270px); }
  .category-card { min-height: 170px; }
}

@media (max-width: 360px) {
  .products-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .product-image-wrap { height: 240px; }
  .product-info { padding: 14px; }
  .product-name { min-height: 0; font-size: 16px; }
  .product-category, .product-rating small { font-size: 10px; }
  .product-price { font-size: 15px; }
  .add-button { width: 36px; height: 36px; flex-basis: 36px; }
  .category-card { min-height: 135px; }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 0;
  border: 0;
  background: none;
  color: #18354a;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.nav-toggle-icon { font-size: 18px; line-height: 1; }
.nav-toggle-chevron { margin-left: auto; font-size: 18px; transition: transform .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-chevron { transform: rotate(180deg); }
.nav-toggle:focus-visible, .nav-inner a:focus-visible { outline: 2px solid #075182; outline-offset: 3px; }

@media (max-width: 900px) {
  .category-nav { overflow: visible; }
  .nav-inner {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 5%;
  }
  .nav-toggle { display: flex; flex: 0 0 56px; }
  .nav-links, .nav-links > .nav-promo { display: none; }
  .nav-inner.is-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 8px;
  }
  .nav-inner.is-open .nav-links > a { display: flex; }
  .nav-inner.is-open .nav-links > a {
    min-height: 42px;
    align-items: center;
    padding: 0 4px;
    border-top: 1px solid rgb(24 53 74 / 12%);
    white-space: normal;
  }
  .nav-inner.is-open .nav-links > .mobile-logout-nav {
    display: flex;
    min-height: 42px;
    align-items: center;
    border-top: 1px solid rgb(24 53 74 / 12%);
  }
  .nav-inner.is-open .nav-links > .mobile-logout-nav button {
    min-height: 42px;
    color: #18354a;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .brand-logo { width: clamp(180px, 49vw, 220px); }
}

@media (max-width: 360px) {
  .brand-logo { width: 175px; }
}

/* ==========================================================================
   Slider principal: refresco visual
   ========================================================================== */
.hero {
  border-radius: 20px;
  box-shadow: 0 30px 60px -34px rgb(38 60 46 / 55%), 0 2px 6px rgb(38 60 46 / 8%);
}

/* Zoom suave de la imagen (efecto "Ken Burns") */
.hero-slide-image {
  transform: scale(1.07);
  transition: transform 7.5s cubic-bezier(.2, .6, .2, 1);
  will-change: transform;
}
.hero-slide.is-active .hero-slide-image { transform: scale(1); }

/* Entrada escalonada del texto */
.hero-slide .hero-content > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.hero-slide.is-active .hero-content > * { opacity: 1; transform: none; }
.hero-slide.is-active .hero-content > :nth-child(1) { transition-delay: .15s; }
.hero-slide.is-active .hero-content > :nth-child(2) { transition-delay: .27s; }
.hero-slide.is-active .hero-content > :nth-child(3) { transition-delay: .39s; }
.hero-slide.is-active .hero-content > :nth-child(4) { transition-delay: .51s; }

/* Texto */
.hero .eyebrow {
  display: inline-flex;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgb(52 77 59 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 62%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 16px;
}
.hero h1, .hero-title { text-wrap: balance; text-shadow: 0 1px 0 rgb(255 255 255 / 35%); }
.hero-description { color: #55634f; font-size: 14px; }

/* Botón principal */
.hero-cta {
  gap: 14px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .2px;
  box-shadow: 0 14px 26px -14px rgb(38 60 46 / 70%);
}
.hero-cta span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--green-dark);
  font-size: 15px;
  transition: transform .25s;
}
.hero-cta:hover span { transform: translateX(3px); }

/* Flechas laterales: cristal esmerilado */
.hero-arrow {
  border: 1px solid rgb(255 255 255 / 70%);
  background: rgb(255 255 255 / 55%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -12px rgb(38 60 46 / 55%);
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.hero-arrow:hover {
  background: var(--green);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgb(38 60 46 / 70%);
  transform: translateY(-50%) scale(1.08);
}
.hero-arrow:active { transform: translateY(-50%) scale(.96); }

/* Paginación y contador */
.hero-carousel-controls { bottom: 24px; }
.hero-pagination {
  gap: 2px;
  padding: 0 8px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 999px;
  background: rgb(255 255 255 / 55%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-pagination button { width: 22px; }
.hero-pagination button span { width: 8px; height: 8px; background: #b2baae; }
.hero-pagination button:hover span { background: #7f8c7b; }
.hero-pagination button.active span { width: 26px; background: var(--green); }
.hero-slide-number {
  margin-right: 0;
  padding: 7px 13px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 999px;
  background: rgb(255 255 255 / 55%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .5px;
}

@media (max-width: 760px) {
  .hero { border-radius: 16px; }
  .hero-carousel-controls { bottom: 14px; }
  .hero-description { font-size: 12.5px; }
  .hero-cta { padding: 6px 6px 6px 18px; }
  .hero-cta span { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-image,
  .hero-slide.is-active .hero-slide-image { transform: none; transition: none; }
  .hero-slide .hero-content > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Menú principal (barra de categorías): refresco visual
   ========================================================================== */
.category-nav {
  border-top: 1px solid rgb(255 255 255 / 8%);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffefa 0%, #f6f5ee 100%);
  box-shadow: 0 14px 24px -22px rgb(38 60 46 / 65%);
}
.nav-inner { min-height: 58px; }
.nav-inner a { color: var(--green-dark); }
.nav-toggle { color: var(--green-dark); }
.nav-toggle:focus-visible, .nav-inner a:focus-visible { outline-color: var(--green); }

@media (min-width: 901px) {
  .nav-links { gap: 4px; }

  /* Enlaces como "píldoras" */
  .nav-inner a:not(.all-menu) {
    position: relative;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1px;
    transition: background .2s, color .2s;
  }
  .nav-inner a:not(.all-menu):hover { background: rgb(52 77 59 / 9%); color: var(--green-dark); }
  .nav-inner a:not(.all-menu)::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
    transform: translateX(-50%);
    transition: width .25s ease;
  }
  .nav-inner a:not(.all-menu):hover::after { width: 18px; }

  /* Categoría activa (sin JavaScript, según la categoría elegida) */
  body[data-active-category="Hogar"] .nav-inner a[data-category-link="Hogar"],
  body[data-active-category="Tecnología"] .nav-inner a[data-category-link="Tecnología"],
  body[data-active-category="Moda"] .nav-inner a[data-category-link="Moda"],
  body[data-active-category="Ocio"] .nav-inner a[data-category-link="Ocio"] {
    background: var(--green);
    color: #fff;
    box-shadow: 0 10px 18px -12px rgb(38 60 46 / 80%);
  }
  body[data-active-category="Hogar"] .nav-inner a[data-category-link="Hogar"]::after,
  body[data-active-category="Tecnología"] .nav-inner a[data-category-link="Tecnología"]::after,
  body[data-active-category="Moda"] .nav-inner a[data-category-link="Moda"]::after,
  body[data-active-category="Ocio"] .nav-inner a[data-category-link="Ocio"]::after { display: none; }

  /* "Todo el menú" como botón destacado */
  .nav-inner a.all-menu {
    margin-right: 10px;
    padding: 9px 18px 9px 14px;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 12px 20px -14px rgb(38 60 46 / 90%);
    transition: background .2s, transform .2s;
  }
  .nav-inner a.all-menu span { color: var(--lime); }
  .nav-inner a.all-menu:hover { background: var(--green-dark); color: #fff; transform: translateY(-1px); }

  /* Ofertas destacadas */
  .nav-inner a.nav-offer { color: #a8500f; background: rgb(246 163 93 / 16%); }
  .nav-inner a.nav-offer:hover { background: rgb(246 163 93 / 28%); color: #8f420a; }
  .nav-inner a.nav-offer::after { display: none; }

  /* Mensaje de envío gratis */
  .nav-promo {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--lime);
    color: var(--green-dark);
    font-size: 11px;
    letter-spacing: .2px;
  }
  .nav-promo::before { content: "🚚"; margin-right: 7px; }
}

/* Menú desplegable en móvil y tablet */
@media (max-width: 900px) {
  .nav-toggle { font-size: 14px; }
  .nav-inner.is-open .nav-links > a { border-top-color: rgb(52 77 59 / 10%); color: var(--green-dark); font-weight: 600; }
  .nav-inner.is-open .nav-links > a.nav-offer { color: #a8500f; }
  .nav-inner.is-open .nav-links > .mobile-logout-nav { border-top-color: rgb(52 77 59 / 10%); }
  .nav-inner.is-open .nav-links > .mobile-logout-nav button { color: var(--green-dark); }
  body[data-active-category="Hogar"] .nav-inner a[data-category-link="Hogar"],
  body[data-active-category="Tecnología"] .nav-inner a[data-category-link="Tecnología"],
  body[data-active-category="Moda"] .nav-inner a[data-category-link="Moda"],
  body[data-active-category="Ocio"] .nav-inner a[data-category-link="Ocio"] { color: var(--green); font-weight: 800; }
}

/* Iconos del menú principal */
.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform .25s ease;
}
@media (min-width: 901px) {
  .nav-inner a:not(.all-menu) { display: inline-flex; align-items: center; gap: 8px; padding-left: 13px; }
  .nav-inner a:not(.all-menu):hover .nav-icon { transform: translateY(-1px) scale(1.12); }
}
@media (max-width: 900px) {
  .nav-inner.is-open .nav-links > a { gap: 10px; }
  .nav-inner.is-open .nav-links > a .nav-icon { width: 20px; height: 20px; flex-basis: 20px; }
}

/* ==========================================================================
   Carrito lateral (panel que se abre a la derecha)
   ========================================================================== */
body.cart-drawer-open { overflow: hidden; }
.cart-drawer [hidden], .cart-drawer-backdrop[hidden] { display: none !important; }
body.cart-drawer-open .toast { z-index: 80; right: auto; left: 22px; }

.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(20 30 24 / 52%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
.cart-drawer-backdrop.is-open { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  width: min(420px, 100vw);
  flex-direction: column;
  background: #fffefa;
  color: var(--ink);
  box-shadow: -24px 0 60px -28px rgb(20 30 24 / 60%);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
}
.cart-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }

.cart-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.cart-drawer-header .section-kicker { margin-bottom: 4px; }
.cart-drawer-header h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--green-dark); font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; letter-spacing: -.5px; }
.cart-drawer-count { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; border-radius: 999px; background: var(--lime); color: var(--green-dark); font-family: "DM Sans", "Segoe UI", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.cart-drawer-close { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--green-dark); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.cart-drawer-close:hover { background: var(--green); color: #fff; }
.cart-drawer-close:focus-visible, .cart-drawer a:focus-visible, .cart-drawer button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 6px 22px; overscroll-behavior: contain; }
.cart-drawer-status { margin: 28px 0; color: var(--muted); font-size: 13px; text-align: center; }
.cart-drawer-items { margin: 0; padding: 0; list-style: none; }
.cart-drawer-item { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-drawer-item:last-child { border-bottom: 0; }
.cart-drawer-image { display: block; width: 68px; height: 68px; overflow: hidden; border-radius: 10px; background: #f0efe8; }
.cart-drawer-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-drawer-info { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.cart-drawer-name { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cart-drawer-name:hover { color: var(--green); }
.cart-drawer-price { color: var(--muted); font-size: 12px; }
.cart-drawer-controls { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cart-drawer-quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.cart-drawer-quantity button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--green-dark); font-size: 16px; cursor: pointer; transition: background .2s; }
.cart-drawer-quantity button:hover:not(:disabled) { background: rgb(52 77 59 / 10%); }
.cart-drawer-quantity button:disabled { color: #b9bdb6; cursor: not-allowed; }
.cart-drawer-quantity span { min-width: 22px; font-size: 12px; font-weight: 800; text-align: center; }
.cart-drawer-remove { padding: 0; border: 0; background: none; color: #a8500f; font-size: 11px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-drawer-remove:hover { color: #7c3a0a; }
.cart-drawer-subtotal { align-self: start; color: var(--green-dark); font-size: 13px; font-weight: 800; white-space: nowrap; }

.cart-drawer-empty { display: grid; justify-items: center; gap: 4px; padding: 56px 12px; text-align: center; }
.cart-drawer-empty > span { font-size: 40px; }
.cart-drawer-empty h3 { margin: 8px 0 0; color: var(--green-dark); font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; }
.cart-drawer-empty p { max-width: 240px; margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }

.cart-drawer-footer { display: grid; gap: 10px; padding: 18px 22px 22px; border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -16px 28px -24px rgb(38 60 46 / 45%); }
.cart-drawer-total { display: flex; align-items: baseline; justify-content: space-between; }
.cart-drawer-total span { color: var(--muted); font-size: 13px; font-weight: 600; }
.cart-drawer-total strong { color: var(--green-dark); font-size: 22px; font-weight: 800; }
.cart-drawer-footer small { margin-top: -4px; color: var(--muted); font-size: 11px; }
.cart-drawer-primary, .cart-drawer-secondary { display: grid; min-height: 46px; place-items: center; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: background .2s, color .2s, transform .2s; }
.cart-drawer-primary { background: var(--green); color: #fff; box-shadow: 0 14px 24px -16px rgb(38 60 46 / 90%); }
.cart-drawer-primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.cart-drawer-secondary { border: 1px solid var(--line); background: #fff; color: var(--green-dark); }
.cart-drawer-secondary:hover { background: rgb(52 77 59 / 8%); }

@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
  .cart-drawer-header, .cart-drawer-footer { padding-right: 16px; padding-left: 16px; }
  .cart-drawer-body { padding-right: 16px; padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-drawer-backdrop { transition: none; }
}

/* --- SECCIÓN DE DATOS DE ENVÍO (CHECKOUT DETAILS) --- */

.checkout-details {
    background-color: #fbfbfb;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.checkout-details-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

.checkout-details-heading .section-kicker {
    color: #ff9900; /* Color naranja estilo Amazon */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-bottom: 5px;
}

.checkout-details-heading h2 {
    font-size: 1.4rem;
    color: #333;
    margin: 0;
}

.checkout-details-edit {
    font-size: 0.9rem;
    color: #007185;
    text-decoration: none;
    font-weight: 500;
}

.checkout-details-edit:hover {
    text-decoration: underline;
    color: #c45500;
}

/* Formulario */
.checkout-details-form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide en dos columnas */
    gap: 15px;
}

.checkout-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkout-field.is-wide {
    grid-column: span 2; /* La dirección ocupa todo el ancho */
}

.checkout-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}

.checkout-field input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

.checkout-field input:focus {
    border-color: #ff9900;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2);
}

/* Estilos de error */
.checkout-field.has-error input {
    border-color: #d93025;
    background-color: #fff8f7;
}

.checkout-field small {
    color: #d93025;
    font-size: 0.75rem;
    margin-top: 2px;
}

/* Acciones del formulario */
.checkout-details-actions {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.checkout-details-save {
    background-color: #ffd814;
    border: 1px solid #fcd200;
    border-radius: 20px;
    padding: 10px 25px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.checkout-details-save:hover {
    background-color: #f7ca00;
}

/* Resumen de datos guardados */
.checkout-details-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 0;
}

.checkout-details-summary div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkout-details-summary dt {
    font-weight: bold;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
}

.checkout-details-summary dd {
    margin: 0;
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 600px) {
    .checkout-details-form {
        grid-template-columns: 1fr;
    }
    .checkout-field.is-wide {
        grid-column: span 1;
    }
    .checkout-details-actions {
        grid-column: span 1;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== Alerta promocional (movida desde el layout) ===== */
.promo-alert-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .7); backdrop-filter: blur(5px); animation: promoFadeIn .4s ease; }
.promo-alert-overlay[hidden] { display: none; }
.promo-alert-box { position: relative; width: 90%; max-width: 450px; max-height: 92vh; overflow-y: auto; padding: 35px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 25px 50px rgba(0, 0, 0, .4); animation: promoSlideUp .5s cubic-bezier(.175, .885, .32, 1.275); }
.promo-close-btn { position: absolute; top: 15px; right: 15px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f0f0f0; color: #666; font-size: 24px; cursor: pointer; transition: background .2s, color .2s; }
.promo-close-btn:hover { background: #ddd; color: #000; }
.promo-badge { display: inline-block; margin-bottom: 15px; padding: 6px 14px; border-radius: 50px; background: #ff9900; color: #1b1b1b; font-size: .72rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.promo-content h2 { margin: 0 0 15px; color: #232f3e; font-size: 1.8rem; line-height: 1.2; }
.promo-content p { margin: 0 0 25px; color: #555; font-size: 1.05rem; line-height: 1.6; }
.promo-cta-button { display: block; padding: 14px 30px; border-radius: 50px; background: #ffd814; color: #111; font-size: 1.1rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 15px rgba(255, 216, 20, .4); transition: transform .3s, background .3s, box-shadow .3s; }
.promo-cta-button:hover { background: #f7ca00; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255, 216, 20, .6); }
.promo-image-link { display: block; margin: 0 auto 18px; }
.promo-product-image { display: block; width: 100%; max-width: 280px; height: 200px; margin: 0 auto; object-fit: contain; border-radius: 16px; background: #fff; }
@keyframes promoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes promoSlideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===== Accesibilidad ===== */
.skip-link { position: fixed; top: -48px; left: 12px; z-index: 100000; padding: 10px 16px; border-radius: 0 0 8px 8px; background: #26382d; color: #fff; font-weight: 700; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid #ff9900; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .promo-alert-overlay, .promo-alert-box { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===== Paginación del catálogo ===== */
.pagination { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 36px 0 8px; }
.pagination-summary { margin: 0; color: #5f6b61; font-size: .9rem; }
.pagination-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid #d7ddd3; border-radius: 999px; background: #fff; color: #26382d; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
a.pagination-link:hover { border-color: #26382d; background: #f1f5ee; }
.pagination-link.is-current { border-color: #26382d; background: #26382d; color: #fff; }
.pagination-link.is-disabled { color: #a3aca0; background: #f6f7f4; cursor: not-allowed; }
.pagination-gap { padding: 0 2px; color: #8b9288; }
@media (max-width: 480px) { .pagination-link { min-width: 40px; height: 40px; padding: 0 10px; } }

/* ===== Catálogo: 4 productos por fila en escritorio (tarjetas más compactas) ===== */
@media (min-width: 901px) {
  .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .product-image-wrap { height: 160px; }
  .product-info { padding: 10px 10px 11px; }
  .product-name { min-height: 38px; font-size: 13px; line-height: 1.45; }
  .product-rating { margin: 5px 0; }
  .product-price { font-size: 13px; }
  .product-buy-row { gap: 7px; margin-top: 7px; }
  .product-buy-row .add-button { height: 34px; padding: 0 10px; font-size: 11px; }
  .product-card:hover, .home-style-refresh .product-card:hover { transform: translateY(-3px) scale(1.03); }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .product-card:hover { transform: translateY(-3px) scale(1.03); }
}

/* Stock de Amazon */
.stock-badge { display: inline-block; margin: 6px 0; padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.stock-in_stock { background: #e3f4e6; color: #1d6b2e; }
.stock-out_of_stock { background: #fbe4e1; color: #a02a1c; }
.stock-unknown { background: #eef0f2; color: #5b636b; }
.add-button:disabled, .detail-add-button:disabled { opacity: .5; cursor: not-allowed; }

/* Botón grande bajo la imagen del producto */
.detail-media { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detail-media .detail-add-button { display: flex; width: 100%; min-width: 0; height: 60px; font-size: 18px; letter-spacing: .3px; border-radius: 8px; }
.detail-info .stock-badge { font-size: .95rem; margin: 0 0 10px; }

/* ===== Botón de compra con carrito + tipografía de productos ===== */
.add-button .cart-icon { flex: 0 0 auto; transition: transform .3s ease; }
.product-buy-row .add-button,
.detail-add-button {
  position: relative; overflow: hidden; gap: 9px;
  background: linear-gradient(135deg, #3f6a4a 0%, #344d3b 55%, #263c2e 100%);
  color: #fff; border: 0; border-radius: 999px;
  font-family: "Nunito", "DM Sans", sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .6px; text-transform: uppercase;
  box-shadow: 0 6px 16px rgb(52 77 59 / 35%), inset 0 1px 0 rgb(255 255 255 / 22%);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease, color .3s ease;
}
.product-buy-row .add-button::after,
.detail-add-button::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / 35%), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.product-buy-row .add-button:hover::after,
.detail-add-button:hover::after { left: 130%; }
.product-buy-row .add-button:hover, .product-buy-row .add-button:focus-visible,
.detail-add-button:hover, .detail-add-button:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffd21f 0%, #f6a35d 100%);
  color: #1d2a20;
  box-shadow: 0 10px 22px rgb(246 163 93 / 45%);
}
.product-buy-row .add-button:hover .cart-icon,
.detail-add-button:hover .cart-icon { transform: translateX(3px) rotate(-8deg); }
.product-buy-row .add-button:active, .detail-add-button:active { transform: translateY(0) scale(.97); }
.product-buy-row .add-button:disabled, .detail-add-button:disabled {
  background: #b9bfb6; box-shadow: none; transform: none; color: #fff;
}
.product-buy-row .add-button:disabled::after, .detail-add-button:disabled::after { display: none; }
.product-buy-row .add-button { height: 44px; }
.detail-media .detail-add-button { height: 60px; font-size: 18px; border-radius: 999px; }
.detail-media .detail-add-button .cart-icon { width: 26px; height: 26px; }

/* Descripciones de producto: negrita y tipografía elegante */
.product-name {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 16px;
  letter-spacing: .1px; line-height: 1.35; color: #223326;
}
.product-name a { font-weight: 700; }
.detail-description {
  font-family: "Nunito", "DM Sans", sans-serif; font-weight: 700; font-size: 17px;
  line-height: 1.8; color: #3a4a3d; letter-spacing: .1px;
}
@media (max-width: 640px) {
  .product-name { font-size: 15px; }
  .product-buy-row .add-button { height: 40px; font-size: 12px; padding: 0 10px; gap: 6px; }
  .add-button .cart-icon { width: 17px; height: 17px; }
}

/* ===== Botón negro, texto claro y mucho más ancho ===== */
.product-buy-row { gap: 12px; }
.product-buy-row .add-button,
.detail-add-button {
  background: #000; color: #f5f5f0; border-radius: 10px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 30%);
}
.product-buy-row .add-button {
  width: calc(100% + 24px); margin: 0 -12px -12px; height: 52px;
  border-radius: 0; font-size: 15px; letter-spacing: 1px;
}
.product-buy-row .add-button:hover, .product-buy-row .add-button:focus-visible,
.detail-add-button:hover, .detail-add-button:focus-visible {
  background: #1c1c1c; color: #fff; box-shadow: 0 10px 22px rgb(0 0 0 / 40%);
}
.product-buy-row .add-button:disabled, .detail-add-button:disabled { background: #555; color: #ddd; }
.detail-media .detail-add-button { width: 100%; height: 66px; font-size: 19px; border-radius: 10px; }
@media (max-width: 640px) {
  .product-buy-row .add-button { width: calc(100% + 18px); margin: 0 -9px -11px; height: 46px; font-size: 13px; }
}

/* Descripciones siempre en negrita */
.product-name, .product-name a, .detail-description { font-weight: 800; }

/* ===== Ficha de producto: botón negro, texto blanco y a todo el ancho ===== */
.product-detail > .detail-add-button {
  grid-column: 1 / -1; display: flex; width: 100%; min-width: 0; height: 78px;
  gap: 14px; border-radius: 12px; background: #000; color: #fff;
  font-size: 22px; letter-spacing: 1.5px;
}
.product-detail > .detail-add-button:hover, .product-detail > .detail-add-button:focus-visible { background: #222; color: #fff; }
.product-detail > .detail-add-button .cart-icon { width: 32px; height: 32px; }
.product-detail > .detail-add-button:disabled { background: #555; color: #ddd; }
@media (max-width: 640px) { .product-detail > .detail-add-button { height: 62px; font-size: 17px; } }

/* Descripción en negrita */
.detail-description, .detail-description * { font-weight: 800 !important; color: #1f2b22; }

/* ===== Botón justo bajo la imagen: negro, letras blancas, muy largo ===== */
.product-detail { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); }
.detail-media .detail-add-button {
  display: flex; width: 100%; min-width: 0; height: 72px; gap: 14px;
  border-radius: 12px; background: #000; color: #fff;
  font-size: 21px; letter-spacing: 1.5px;
}
.detail-media .detail-add-button:hover, .detail-media .detail-add-button:focus-visible { background: #222; color: #fff; }
.detail-media .detail-add-button:disabled { background: #555; color: #ddd; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .detail-media .detail-add-button { height: 60px; font-size: 17px; } }

/* ===== Ficha de producto: botón negro (nunca verde), muy largo ===== */
.product-detail { grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr); }
.detail-media .detail-add-button,
.detail-media .detail-add-button:hover,
.detail-media .detail-add-button:focus-visible,
.detail-media .detail-add-button:active {
  background: #000 !important; background-image: none !important; color: #fff !important;
  width: 100%; height: 80px; font-size: 22px; border-radius: 12px;
}
.detail-media .detail-add-button:hover { background: #222 !important; }
.detail-media .detail-add-button:disabled { background: #555 !important; }
.detail-description, .detail-description * { font-weight: 900 !important; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .detail-media .detail-add-button { height: 62px; font-size: 17px; } }

/* ===== Hover amarillo + ficha un poco menos ancha + botón más largo ===== */
.product-buy-row .add-button:hover, .product-buy-row .add-button:focus-visible,
.detail-media .detail-add-button:hover, .detail-media .detail-add-button:focus-visible {
  background: #ffd21f !important; background-image: none !important; color: #000 !important;
  box-shadow: 0 10px 22px rgb(255 210 31 / 50%);
}
.product-detail { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); }
.detail-media .detail-add-button { height: 92px; font-size: 24px; letter-spacing: 2px; }
.detail-media .detail-add-button .cart-icon { width: 34px; height: 34px; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .detail-media .detail-add-button { height: 64px; font-size: 17px; } }

/* ===== Botones de la portada alineados: todos a la misma altura ===== */
.products-grid { align-items: stretch; }
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card .product-info { display: flex; flex: 1; flex-direction: column; }
.product-card .product-buy-row { margin-top: auto; padding-top: 10px; }
.product-card .product-name {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.35em * 3);
}
.product-card .product-rating, .product-card .product-rating-unrated { min-height: 18px; }

/* =====================================================================
   PANEL DE ADMINISTRACIÓN — rediseño profesional (azul marino + turquesa)
   ===================================================================== */
body:has(.admin-shell) { background: #eef2f7; }
.admin-shell {
  --admin-accent: #0d9488;
  --admin-accent-dark: #0f766e;
  --admin-accent-soft: #e6f6f4;
  --admin-border: #e2e8f0;
  --admin-ink: #0f172a;
  --admin-navy: #0f172a;
  --admin-navy-2: #1e293b;
  --admin-muted: #64748b;
  font-family: "Inter", "DM Sans", "Segoe UI", sans-serif;
  color: var(--admin-ink);
  gap: 28px;
}
.admin-shell * { font-family: inherit; }

/* Barra lateral oscura */
.admin-sidebar {
  top: 20px; gap: 4px; padding: 22px 14px; border: 0; border-radius: 16px;
  background: linear-gradient(180deg, var(--admin-navy) 0%, var(--admin-navy-2) 100%);
  box-shadow: 0 14px 34px rgb(15 23 42 / 28%);
}
.admin-sidebar-label { padding: 4px 12px 12px; color: #64748b; font-size: 10px; letter-spacing: 1.6px; }
.admin-nav-link {
  gap: 11px; padding: 12px 13px; border: 0; border-left: 3px solid transparent; border-radius: 9px;
  color: #cbd5e1; font-size: 13px; font-weight: 500;
}
.admin-nav-link:hover { background: rgb(255 255 255 / 7%); color: #fff; border-color: transparent; }
.admin-nav-link.active {
  background: linear-gradient(90deg, rgb(13 148 136 / 32%), rgb(13 148 136 / 8%));
  border-left-color: #2dd4bf; color: #fff; font-weight: 600;
}

/* Cabecera */
.admin-page-heading {
  position: relative; overflow: hidden; padding: 28px 32px; border: 1px solid var(--admin-border); border-radius: 16px;
  background: #fff; box-shadow: 0 4px 18px rgb(15 23 42 / 6%);
}
.admin-page-heading::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #0d9488, #2563eb 60%, #f59e0b); }
.admin-page-heading h1 { color: var(--admin-ink); font-family: "Inter", sans-serif; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.8px; }
.admin-page-heading p:last-child { color: var(--admin-muted); font-size: 14px; }
.admin-shell .section-kicker { color: var(--admin-accent); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }

/* Botones */
.admin-primary-link {
  min-height: 46px; padding: 0 22px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #0d9488, #0f766e); box-shadow: 0 6px 16px rgb(13 148 136 / 32%);
}
.admin-primary-link:hover { background: linear-gradient(135deg, #0f766e, #115e59); box-shadow: 0 10px 22px rgb(13 148 136 / 38%); }
.admin-action-button { min-height: 36px; border-radius: 8px; font-size: 12px; }
.admin-edit-button { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.admin-edit-button:hover { border-color: #93c5fd; background: #dbeafe; color: #1e40af; }
.admin-delete-button { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.admin-delete-button:hover { border-color: #fca5a5; background: #fee2e2; color: #991b1b; }

/* Resumen de ingresos (tarjeta destacada) */
.admin-revenue-summary {
  padding: 24px 28px; border: 0; border-radius: 16px;
  background: linear-gradient(120deg, #0f172a 0%, #134e4a 100%);
  box-shadow: 0 14px 34px rgb(15 23 42 / 25%);
}
.admin-revenue-icon { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, #2dd4bf, #0d9488); color: #042f2e; }
.admin-revenue-copy p { color: #fff; font-size: 16px; font-weight: 700; }
.admin-revenue-copy small { color: #94a3b8; font-size: 12px; }
.admin-revenue-amount { color: #5eead4; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.5px; }
.admin-revenue-count { border-color: rgb(255 255 255 / 20%); background: rgb(255 255 255 / 10%); color: #e2e8f0; font-size: 12px; }
.admin-revenue-buyers { border-top-color: rgb(255 255 255 / 15%); color: #cbd5e1; font-size: 13px; }
.admin-revenue-buyers li { border-color: rgb(255 255 255 / 14%); background: rgb(255 255 255 / 7%); }
.admin-revenue-buyers li strong { color: #fff; }
.admin-revenue-buyers li span { color: #94a3b8; font-size: 12px; }
.admin-revenue-no-buyers { border-top-color: rgb(255 255 255 / 15%); color: #94a3b8; font-size: 13px; }
.admin-revenue-summary .admin-delete-button { background: rgb(239 68 68 / 15%); border-color: rgb(248 113 113 / 45%); color: #fecaca; }

/* Tarjetas de estadísticas */
.admin-stats { gap: 20px; }
.admin-stat-card, .admin-stat-card:nth-child(2), .admin-stat-card:nth-child(3) {
  padding: 26px 26px 24px 30px; border: 1px solid var(--admin-border); border-radius: 16px;
  background: #fff; box-shadow: 0 4px 18px rgb(15 23 42 / 6%);
}
.admin-stat-card::before { width: 5px; background: #0d9488; }
.admin-stat-card:nth-child(2)::before { background: #2563eb; }
.admin-stat-card:nth-child(3)::before { background: #f59e0b; }
.admin-stat-card span { color: var(--admin-muted); font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.admin-stat-card strong { color: var(--admin-ink); font-size: 38px; font-weight: 800; letter-spacing: -1px; }
.admin-stat-card small { color: #94a3b8; font-size: 12px; }

/* Paneles */
.admin-panel { padding: 28px; border: 1px solid var(--admin-border); border-radius: 16px; box-shadow: 0 4px 18px rgb(15 23 42 / 6%); }
.admin-panel-heading { padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid #f1f5f9; }
.admin-panel-heading h2 { color: var(--admin-ink); font-family: "Inter", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.admin-panel-icon { border-radius: 10px; background: var(--admin-accent-soft); color: var(--admin-accent-dark); }
.admin-payment-balance { border-color: var(--admin-border); border-radius: 12px; background: #f8fafc; }
.admin-payment-balance h3 { font-size: 16px; }
.admin-payment-balance > div { color: var(--admin-muted); font-size: 13px; }
.admin-payment-balance p, .admin-payment-balance small { color: var(--admin-muted); font-size: 12px; }
.admin-user-count { color: var(--admin-muted); font-size: 12px; }

/* Tablas */
.admin-table-wrap { border: 1px solid var(--admin-border); border-radius: 12px; }
.admin-table th {
  padding: 13px 14px; border-bottom: 1px solid var(--admin-border); background: #f8fafc;
  color: #475569; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.admin-table td { padding: 14px; border-bottom: 1px solid #f1f5f9; color: #475569; font-size: 13px; }
.admin-table tbody tr { transition: background-color .15s; }
.admin-table tbody tr:hover { background: #f8fafc; }
.admin-table td strong { color: var(--admin-ink); font-size: 14px; font-weight: 700; }
.admin-orders-table td strong { font-size: 13px; }
.admin-orders-table td span, .admin-order-items span { color: #94a3b8; font-size: 12px; }
.admin-order-items { color: #334155; font-size: 13px; }
.admin-table-link, .admin-secondary-link { color: var(--admin-accent-dark); font-size: 12px; }
.admin-empty { color: #94a3b8 !important; }
.order-status { padding: 5px 11px; font-size: 11px !important; }
.order-status.is-paid { background: #dcfce7; color: #15803d; }
.order-status.is-pending { background: #fef3c7; color: #b45309; }
.role-badge { padding: 4px 10px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; }
.role-badge.is-admin { background: #ccfbf1; color: #0f766e; }

/* Formularios */
.admin-field label { color: #334155; font-size: 12px; font-weight: 600; }
.admin-field input, .admin-field select, .admin-field textarea {
  min-height: 44px; padding: 10px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; color: var(--admin-ink);
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { border-color: #0d9488; box-shadow: 0 0 0 4px rgb(13 148 136 / 15%); }
.admin-form-actions { border-top-color: #f1f5f9; }
.admin-inventory-filter select { border-color: #cbd5e1; border-radius: 10px; }
.admin-inventory-filter label { color: #334155; }
.admin-message-compose { border-color: var(--admin-border); border-radius: 12px; background: #f8fafc; }
.admin-message-compose h3 { color: var(--admin-ink); font-family: "Inter", sans-serif; font-weight: 700; }
.admin-notice { border-radius: 10px; font-size: 13px; }
.admin-notice.success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.admin-notice.error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.admin-hero-slide-form { border-color: var(--admin-border); border-radius: 12px; background: #f8fafc; }

@media (max-width: 900px) {
  .admin-sidebar { position: static; grid-auto-flow: column; overflow-x: auto; padding: 12px; }
  .admin-sidebar-label { display: none; }
  .admin-nav-link { border-left: 0; white-space: nowrap; }
  .admin-nav-link.active { border-bottom: 3px solid #2dd4bf; }
  .admin-panel, .admin-page-heading { padding: 20px; }
}

/* ASIN en pedidos del panel */
.admin-asin { display: inline-block; margin: 3px 0 6px; padding: 2px 8px; border-radius: 6px; background: #f1f5f9; color: #334155 !important; font-size: 12px !important; font-weight: 600; letter-spacing: .4px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace !important; }
.admin-asin a { color: #0f766e; text-decoration: underline; }
.admin-asin.is-missing { color: #94a3b8 !important; font-weight: 400; }

/* Botón "Comprar" más largo */
.product-detail { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .9fr); }
.detail-media .detail-add-button { height: 100px; font-size: 28px; letter-spacing: 3px; }
.detail-media .detail-add-button .cart-icon { width: 38px; height: 38px; }
.product-buy-row .add-button { height: 58px; font-size: 17px; letter-spacing: 1.5px; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .detail-media .detail-add-button { height: 68px; font-size: 20px; } .product-buy-row .add-button { height: 50px; font-size: 14px; } }

/* Botón del carrito del menú superior, más grande */
.cart-button { padding: 6px 4px; gap: 7px; }
.cart-icon { font-size: 34px; line-height: 1; }
.cart-count { top: -4px; left: 22px; min-width: 22px; height: 22px; font-size: 13px; }
.cart-button strong { font-size: 15px; }
@media (max-width: 640px) { .cart-icon { font-size: 30px; } }

/* Opiniones escritas */
.review-comment-label { display: block; margin: 14px 0 6px; color: #3c473b; font-size: 13px; font-weight: 700; }
.review-comment-label span { color: #8b9288; font-weight: 400; }
.review-comment { width: 100%; padding: 11px 13px; border: 1px solid #d5dad0; border-radius: 8px; background: #fff; color: #2c372d; font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; }
.review-comment:focus { border-color: #5f8a58; outline: 0; box-shadow: 0 0 0 3px rgb(95 138 88 / 18%); }
.product-rating-form .review-comment + .auth-submit { margin-top: 12px; }
.product-reviews { padding: 4px 0 18px; margin: 0 0 16px; border-bottom: 1px solid #eceee8; }
.product-reviews h2 { margin: 0 0 12px; color: #3c473b; font-size: 16px; }
.product-reviews h2 small { color: #8b9288; font-weight: 500; }
.product-reviews-empty { margin: 0; color: #858b82; font-size: 13px; }
.product-reviews-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.product-review { padding: 13px 15px; border: 1px solid #e9ece4; border-radius: 10px; background: #fafbf8; }
.product-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.product-review-head strong { color: #2c372d; font-size: 14px; }
.product-review-stars { color: #e5a64f; font-size: 14px; letter-spacing: 1px; }
.product-review-head time { margin-left: auto; color: #9aa095; font-size: 11px; }
.product-review p { margin: 0; color: #4a554b; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }

/* Botones del menú superior: Administración, Mensajes y Cerrar sesión (azul claro + texto amarillo) */
.admin-header-link, .messages-header-link, .header-auth-form .header-auth-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #4db3f7 0%, #2a9df4 100%);
  color: #ffe14d; font-size: 12px; font-weight: 800; letter-spacing: .3px; line-height: 1;
  text-shadow: 0 1px 2px rgb(10 50 90 / 55%);
  box-shadow: 0 4px 10px rgb(42 157 244 / 35%);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.admin-header-link:hover, .messages-header-link:hover, .header-auth-form .header-auth-link:hover,
.admin-header-link:focus-visible, .messages-header-link:focus-visible, .header-auth-form .header-auth-link:focus-visible {
  color: #fff04d; background: linear-gradient(135deg, #6cc4fa 0%, #3aa8f7 100%);
  transform: translateY(-1px); box-shadow: 0 7px 16px rgb(42 157 244 / 45%);
}

/* Botones del menú superior: amarillo, texto blanco, cuadrados y un poco más grandes */
.admin-header-link, .messages-header-link, .header-auth-form .header-auth-link {
  padding: 11px 20px; border-radius: 0; font-size: 13px;
  background: #f2b705; background-image: none; color: #fff;
  text-shadow: 0 1px 2px rgb(90 60 0 / 60%);
  box-shadow: 0 4px 10px rgb(242 183 5 / 35%);
}
.admin-header-link:hover, .messages-header-link:hover, .header-auth-form .header-auth-link:hover,
.admin-header-link:focus-visible, .messages-header-link:focus-visible, .header-auth-form .header-auth-link:focus-visible {
  background: #ffc61a; background-image: none; color: #fff;
  box-shadow: 0 7px 16px rgb(242 183 5 / 45%);
}

/* Botones del menú superior: blancos con texto negro, cuadrados (también en móvil) */
.admin-header-link, .messages-header-link, .header-auth-form .header-auth-link {
  background: #fff; background-image: none; color: #000; text-shadow: none;
  border-radius: 0; box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
}
.admin-header-link:hover, .messages-header-link:hover, .header-auth-form .header-auth-link:hover,
.admin-header-link:focus-visible, .messages-header-link:focus-visible, .header-auth-form .header-auth-link:focus-visible {
  background: #ececec; background-image: none; color: #000; box-shadow: 0 6px 14px rgb(0 0 0 / 30%);
}
@media (max-width: 760px) {
  .header-auth-form, .messages-header-link, .admin-header-link { display: flex !important; order: 3; flex: 1 1 0; min-width: 0; margin: 0; }
  .header-auth-form .header-auth-link, .messages-header-link, .admin-header-link {
    width: 100%; padding: 11px 8px; font-size: 12px; text-align: center;
  }
}

/* Hover amarillo en Administración, Mensajes y Cerrar sesión */
.admin-header-link:hover, .messages-header-link:hover, .header-auth-form .header-auth-link:hover,
.admin-header-link:focus-visible, .messages-header-link:focus-visible, .header-auth-form .header-auth-link:focus-visible {
  background: #ffd21f; background-image: none; color: #000; box-shadow: 0 6px 14px rgb(255 210 31 / 45%);
}
/* El botón Comprar de las tarjetas ahora es un enlace */
a.add-button { text-decoration: none; }

/* Menú superior sin desbordarse (sesión iniciada): compacta y, si no cabe, pasa a una segunda fila */
@media (min-width: 761px) {
  .topbar { flex-wrap: wrap; gap: 10px 16px; }
  .search { flex: 1 1 240px; min-width: 200px; }
  .topbar > * { min-width: 0; }
  .header-link, .header-auth-form, .admin-header-link, .messages-header-link, .cart-button, .brand { flex-shrink: 0; }
}
@media (min-width: 761px) and (max-width: 1600px) {
  .delivery-location { display: none; }
  .admin-header-link, .messages-header-link, .header-auth-form .header-auth-link { padding: 10px 14px; font-size: 12px; }
  .orders-link { display: none; }
  .brand-logo { width: clamp(170px, 15vw, 230px); height: auto; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .search { flex-basis: 100%; order: 5; }
}

/* Carrito pegado a la derecha del menú superior */
@media (min-width: 761px) {
  .topbar .cart-button { margin-left: auto; order: 4; }
}
@media (min-width: 761px) and (max-width: 1180px) { .topbar .search { order: 5; } }

/* Valoraciones en el panel de administración */
.admin-ratings-table { min-width: 900px; }
.admin-rating-stars { color: #f59e0b; font-size: 17px; letter-spacing: 2px; }
.admin-rating-comment { max-width: 420px; margin: 6px 0 0; color: #334155; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.admin-rating-comment.is-empty { color: #94a3b8; font-style: italic; }
.admin-rating-edit > summary { list-style: none; cursor: pointer; }
.admin-rating-edit > summary::-webkit-details-marker { display: none; }
.admin-rating-edit[open] > summary { background: #dbeafe; }
.admin-rating-form { display: grid; gap: 12px; width: 280px; padding: 14px; margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.admin-rating-form textarea { min-height: 100px; font-size: 13px; }
.admin-ratings-table td { vertical-align: top; }

/* ===== Editar perfil: más ancho y profesional, foto grande ===== */
.profile-page { width: min(1080px, 92%); margin: 40px auto 72px; }
.profile-heading { margin-bottom: 26px; }
.profile-heading h1 { margin: 6px 0 8px; color: #1f2b22; font-family: "Inter", "DM Sans", sans-serif; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.8px; }
.profile-heading .section-kicker { color: #486443; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.profile-heading .auth-intro { margin: 0; font-size: 15px; }
.profile-page .form-error, .profile-page .form-success { margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.profile-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 26px; }
.profile-main { display: grid; gap: 26px; }
.profile-card { padding: 30px; border: 1px solid #e4e8df; border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgb(38 51 39 / 7%); }
.profile-side { position: sticky; top: 120px; text-align: center; }
.profile-side .profile-photo { width: 220px; height: 220px; margin: 0 auto 20px; border: 5px solid #fff; font-size: 84px; box-shadow: 0 0 0 3px #d9ec73, 0 14px 30px rgb(38 51 39 / 18%); }
.profile-name { margin: 0; color: #1f2b22; font-size: 22px; font-weight: 800; }
.profile-email { margin: 4px 0 0; color: #727a70; font-size: 14px; overflow-wrap: anywhere; }
.profile-side .profile-photo-form { margin-top: 24px; padding-top: 22px; text-align: left; }
.profile-card-title { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid #eef0ea; color: #1f2b22; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.profile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.profile-field { display: grid; gap: 7px; min-width: 0; }
.profile-field-wide { grid-column: 1 / -1; }
.profile-page .auth-form label { margin: 0; color: #334034; font-size: 13px; font-weight: 700; }
.profile-page .auth-form input { min-height: 48px; padding: 0 14px; border: 1px solid #cfd6c9; border-radius: 10px; font-size: 15px; background: #fff; }
.profile-page .auth-form input[type="file"] { padding: 10px 12px; font-size: 13px; }
.profile-page .auth-form input:focus { border-color: #486443; box-shadow: 0 0 0 4px rgb(72 100 67 / 15%); }
.profile-page .password-hint { font-size: 12px; line-height: 1.5; }
.profile-page .auth-submit { min-height: 50px; margin-top: 4px; border-radius: 10px; font-size: 15px; font-weight: 800; background: linear-gradient(135deg, #3f6a4a, #263c2e); box-shadow: 0 6px 16px rgb(38 60 46 / 28%); transition: transform .18s, box-shadow .18s; }
.profile-page .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgb(38 60 46 / 34%); }
.profile-page .auth-switch { margin-top: 26px; font-size: 14px; }
@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-side { position: static; }
}
@media (max-width: 560px) {
  .profile-form-grid { grid-template-columns: 1fr; }
  .profile-card { padding: 22px 18px; }
  .profile-side .profile-photo { width: 180px; height: 180px; font-size: 70px; }
}

/* Menú de categorías: los enlaces de cuenta solo son para el menú móvil; en escritorio no se muestran (evita el desbordamiento al iniciar sesión) */
@media (min-width: 901px) {
  .nav-links > .mobile-account-nav,
  .nav-links > .mobile-logout-nav { display: none !important; }
  .nav-inner { max-width: 100%; }
  .nav-links { min-width: 0; flex-wrap: wrap; }
}

/* Menú de categorías centrado (escritorio) */
@media (min-width: 901px) {
  .nav-inner { justify-content: center; }
  .nav-links { flex: 0 1 auto; justify-content: center; }
  .nav-promo { display: none; }
}

/* Tarjetas: botón "Añadir al carrito" (con SVG) además de "Comprar" */
.product-buy-row .add-button.cart-add-button {
  width: 100%; height: 46px; margin: 0; border-radius: 10px;
  background: #fff; background-image: none; color: #000; border: 2px solid #000;
  box-shadow: none; font-size: 13px; letter-spacing: .5px;
}
.product-buy-row .add-button.cart-add-button::after { display: none; }
.product-buy-row .add-button.cart-add-button:hover,
.product-buy-row .add-button.cart-add-button:focus-visible {
  background: #ffd21f !important; color: #000 !important; border-color: #000; transform: translateY(-1px);
  box-shadow: 0 6px 14px rgb(255 210 31 / 45%);
}
.product-buy-row .add-button.cart-add-button:disabled { background: #eee !important; color: #999 !important; border-color: #ccc; }
@media (max-width: 640px) {
  .product-buy-row .add-button.cart-add-button { height: 42px; font-size: 11px; gap: 5px; padding: 0 6px; }
}
.product-buy-row .add-button.cart-add-button { white-space: nowrap; text-transform: none; letter-spacing: .2px; font-size: 14px; font-weight: 800; gap: 8px; }
.product-buy-row .add-button.cart-add-button .cart-icon { filter: none; width: 22px; height: 22px; }
@media (max-width: 640px) { .product-buy-row .add-button.cart-add-button { font-size: 11.5px; gap: 5px; } .product-buy-row .add-button.cart-add-button .cart-icon { width: 18px; height: 18px; } }

/* =====================================================================
   MENÚ DE ADMINISTRACIÓN FIJO CON IMÁGENES (iconos)
   ===================================================================== */
.admin-shell { align-items: start; }
.admin-sidebar {
  position: sticky; top: var(--admin-sticky-top, 150px);
  max-height: calc(100vh - var(--admin-sticky-top, 150px) - 16px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #334155 transparent;
  gap: 6px; padding: 18px 12px;
}
.admin-sidebar-brand { display: grid; justify-items: center; gap: 9px; padding: 4px 6px 14px; margin-bottom: 4px; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.admin-sidebar-brand img { display: block; width: 100%; max-width: 150px; height: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 35%)); }
.admin-sidebar-brand span { color: #64748b; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-align: center; }
.admin-sidebar-sep { height: 1px; margin: 6px 4px; background: rgb(255 255 255 / 9%); }
.admin-nav-link { gap: 12px; padding: 8px 10px; border-left: 0; border-radius: 12px; }
.admin-nav-link.active { border-left: 0; box-shadow: inset 0 0 0 1px rgb(45 212 191 / 35%); }
.admin-nav-img {
  --c1: #14b8a6; --c2: #0f766e;
  display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 4px 10px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 30%);
  transition: transform .18s;
}
.admin-nav-img svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-nav-link:hover .admin-nav-img, .admin-nav-link.active .admin-nav-img { transform: scale(1.07) rotate(-3deg); }
.admin-nav-img.c1 { --c1: #2dd4bf; --c2: #0d9488; }
.admin-nav-img.c2 { --c1: #a78bfa; --c2: #6d28d9; }
.admin-nav-img.c3 { --c1: #60a5fa; --c2: #1d4ed8; }
.admin-nav-img.c4 { --c1: #34d399; --c2: #047857; }
.admin-nav-img.c5 { --c1: #fb923c; --c2: #c2410c; }
.admin-nav-img.c6 { --c1: #fbbf24; --c2: #b45309; }
.admin-nav-img.c7 { --c1: #38bdf8; --c2: #0369a1; }
.admin-nav-img.c8 { --c1: #f472b6; --c2: #be185d; }
.admin-nav-img.c9 { --c1: #94a3b8; --c2: #475569; }
.admin-nav-text { display: grid; min-width: 0; gap: 1px; line-height: 1.2; }
.admin-nav-text strong { color: inherit; font-size: 13px; font-weight: 600; }
.admin-nav-text small { overflow: hidden; color: #94a3b8; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-link.active .admin-nav-text small, .admin-nav-link:hover .admin-nav-text small { color: #cbd5e1; }
.admin-shell [id] { scroll-margin-top: calc(var(--admin-sticky-top, 150px) + 4px); }

@media (max-width: 900px) {
  .admin-sidebar { top: var(--admin-sticky-top, 120px); z-index: 15; position: sticky; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 6px; }
  .admin-sidebar-brand, .admin-sidebar-sep { display: none; }
  .admin-nav-link { padding: 6px 12px 6px 6px; }
  .admin-nav-link.active { border-bottom: 0; }
  .admin-nav-text small { display: none; }
  .admin-nav-img { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
  .admin-nav-img svg { width: 18px; height: 18px; }
}

/* =====================================================================
   INICIO DE SESIÓN / REGISTRO — diseño profesional a dos columnas
   ===================================================================== */
.auth-page--split { min-height: 0; place-items: center; padding: 48px 16px 72px; }
.auth-card--split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: min(100%, 940px); padding: 0; overflow: hidden;
  border: 0; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px rgb(15 23 42 / 22%), 0 4px 14px rgb(15 23 42 / 8%);
  font-family: "Inter", "DM Sans", "Segoe UI", sans-serif;
}
.auth-visual {
  position: relative; display: flex; align-items: flex-end; min-height: 100%; padding: 36px 32px; color: #fff;
  background: linear-gradient(180deg, rgb(15 23 42 / 55%) 0%, rgb(15 23 42 / 88%) 100%), var(--auth-image) center / cover no-repeat;
}
.auth-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 10%, rgb(250 204 21 / 22%), transparent 55%); pointer-events: none; }
.auth-visual-inner { position: relative; z-index: 1; display: grid; gap: 18px; width: 100%; }
.auth-visual-logo { display: block; width: 190px; max-width: 100%; height: auto; margin-bottom: 14px; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 40%)); }
.auth-visual h2 { margin: 0; color: #fff; font-family: "Inter", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }
.auth-perks { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }
.auth-perks li { display: flex; align-items: center; gap: 10px; color: #e2e8f0; font-size: 13.5px; line-height: 1.35; }
.auth-perks svg { flex: 0 0 22px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #facc15; fill: none; stroke: #1e293b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 44px 46px; }
.auth-card--split .section-kicker { margin: 0; color: #0d9488; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.auth-card--split h1 { margin: 6px 0 8px; color: #0f172a; font-family: "Inter", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.8px; }
.auth-card--split .auth-intro { margin: 0 0 22px; color: #64748b; font-size: 14px; line-height: 1.6; }
.auth-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 11px 5px 8px; margin-bottom: 14px; border: 1px solid #99f6e4; border-radius: 99px; background: #f0fdfa; color: #0f766e; font-size: 11px; font-weight: 700; }
.auth-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.auth-card--split .auth-form { gap: 6px; }
.auth-card--split .auth-form label { margin-top: 8px; color: #334155; font-size: 12.5px; font-weight: 600; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .field-icon { position: absolute; left: 14px; width: 19px; height: 19px; fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .18s; }
.input-wrap:focus-within .field-icon { stroke: #0d9488; }
.auth-card--split .auth-form input, .auth-card--split .auth-form select {
  min-height: 48px; padding: 0 14px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: #0f172a; font-size: 14px; transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.auth-card--split .input-wrap input { padding-left: 44px; }
.auth-card--split .input-wrap input[type="password"], .auth-card--split .input-wrap input#password { padding-right: 46px; }
.auth-card--split .auth-form input:focus, .auth-card--split .auth-form select:focus { border-color: #0d9488; background: #fff; box-shadow: 0 0 0 4px rgb(13 148 136 / 14%); }
.pw-toggle { position: absolute; right: 6px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 9px; background: none; cursor: pointer; }
.pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-toggle:hover svg, .pw-toggle.is-on svg { stroke: #0d9488; }
.pw-toggle:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }
.auth-card--split .auth-submit {
  min-height: 50px; margin-top: 16px; border-radius: 12px; background: linear-gradient(135deg, #0d9488, #0f766e); font-size: 14.5px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 10px 22px rgb(13 148 136 / 32%); transition: transform .18s, box-shadow .18s, filter .18s;
}
.auth-card--split .auth-submit:hover { background: linear-gradient(135deg, #0f766e, #115e59); transform: translateY(-1px); box-shadow: 0 14px 28px rgb(13 148 136 / 38%); }
.auth-card--split .auth-submit:active { transform: translateY(0); }
.auth-card--split.is-admin .auth-submit { background: linear-gradient(135deg, #1e293b, #0f172a); box-shadow: 0 10px 22px rgb(15 23 42 / 30%); }
.auth-card--split.is-admin .auth-submit:hover { background: linear-gradient(135deg, #334155, #1e293b); }
.auth-card--split .auth-switch { margin: 18px 0 0; color: #64748b; font-size: 13px; text-align: center; }
.auth-card--split .auth-switch + .auth-switch { margin-top: 8px; }
.auth-card--split .auth-switch a { margin-left: 4px; color: #0f766e; font-weight: 700; }
.auth-card--split .password-hint { color: #94a3b8; font-size: 11.5px; }
.auth-card--split .form-error, .auth-card--split .form-success { padding: 11px 14px; margin: 0 0 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.auth-card--split .form-error { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
.auth-card--split .form-success { border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; }
.auth-card--split .phone-input-group { gap: 8px; }
.auth-card--split .phone-input-group select { width: 100%; padding-right: 6px; }

@media (max-width: 760px) {
  .auth-page--split { padding: 20px 12px 48px; }
  .auth-card--split { grid-template-columns: 1fr; border-radius: 18px; }
  .auth-visual { min-height: 0; padding: 22px 22px 20px; }
  .auth-visual-logo { width: 130px; margin-bottom: 0; }
  .auth-visual h2, .auth-perks { display: none; }
  .auth-panel { padding: 28px 22px 30px; }
  .auth-card--split h1 { font-size: 26px; }
}
@media (min-width: 901px) {
  .admin-sidebar { gap: 2px; padding: 14px 10px; }
  .admin-sidebar-brand { gap: 6px; padding-bottom: 10px; }
  .admin-sidebar-brand img { max-width: 130px; }
  .admin-nav-link { padding: 6px 9px; }
  .admin-nav-img { flex-basis: 36px; width: 36px; height: 36px; }
}

/* Pedidos: botón para eliminar todos */
.admin-orders-delete-all { margin: 0; }
.admin-orders-delete-all .admin-action-button { min-height: 38px; padding: 0 16px; }

/* "Mi cuenta" del menú superior como botón pequeño (mismo estilo que Administración / Mensajes) */
.header-auth-link.account-button {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 0; font-size: 12px; line-height: 1;
  background: #fff; color: #000; box-shadow: 0 3px 8px rgb(0 0 0 / 25%); transition: transform .18s, box-shadow .18s, background .18s;
}
.header-auth-link.account-button:hover, .header-auth-link.account-button:focus-visible { background: #ffd21f; color: #000; transform: translateY(-1px); box-shadow: 0 6px 14px rgb(255 210 31 / 45%); }
.account-button .account-avatar { width: 22px; height: 22px; flex-basis: 22px; border-width: 1.5px; border-color: #26382d; }
.account-button-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 761px) and (max-width: 1600px) { .header-auth-link.account-button { padding: 6px 11px; } }

/* Carrito: botón "Eliminar todo el carrito" con imagen */
.cart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cart-toolbar-count { color: #697269; font-size: 13px; font-weight: 600; }
.cart-toolbar form, .cart-drawer-clear-form { margin: 0; }
.cart-clear-button {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1.5px solid #fecaca; border-radius: 12px;
  background: #fff5f5; color: #b91c1c; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.cart-clear-button:hover, .cart-clear-button:focus-visible { border-color: #f87171; background: #fee2e2; transform: translateY(-1px); box-shadow: 0 6px 14px rgb(220 38 38 / 18%); }
.cart-clear-img {
  display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 9px;
  background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 3px 8px rgb(220 38 38 / 35%), inset 0 1px 0 rgb(255 255 255 / 30%);
}
.cart-clear-img svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-clear-button:hover .cart-clear-img svg path:first-child { transform: translateY(-1.5px) rotate(-6deg); transform-origin: 12px 7px; }
.cart-clear-button.is-small { width: 100%; justify-content: center; padding: 5px 12px 5px 5px; font-size: 12px; }
.cart-clear-button.is-small .cart-clear-img { width: 28px; height: 28px; flex-basis: 28px; border-radius: 7px; }
.cart-clear-button.is-small .cart-clear-img svg { width: 17px; height: 17px; }
.cart-drawer-clear-form { margin-top: 6px; }
.cart-summary .cart-summary-total { border-top: 2px solid #2c4132; }
.cart-summary .cart-summary-total span { color: #2c4132; font-weight: 700; }
.cart-summary .cart-summary-total strong { font-size: 19px; }
.customer-order-breakdown { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0 0; color: #697269; font-size: 13px; }
.customer-order-breakdown span:nth-child(even) { text-align: right; }

/* Ventana emergente centrada al añadir al carrito */
.added-popup-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgb(15 23 42 / 55%); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s; }
.added-popup-overlay.is-visible { opacity: 1; }
.added-popup { width: min(100%, 400px); padding: 32px 28px 26px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 30px 70px rgb(15 23 42 / 35%); transform: translateY(14px) scale(.95); transition: transform .22s cubic-bezier(.2, .9, .3, 1.3); }
.added-popup-overlay.is-visible .added-popup { transform: none; }
.added-popup-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 16px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 10px 22px rgb(5 150 105 / 35%); }
.added-popup-icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.added-popup h2 { margin: 0 0 8px; color: #0f172a; font-family: "Inter", "DM Sans", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.added-popup-name { margin: 0 0 22px; color: #64748b; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.added-popup-name:empty { display: none; }
.added-popup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.added-popup-actions > * { display: flex; min-height: 46px; align-items: center; justify-content: center; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.added-popup-secondary { border: 1.5px solid #e2e8f0; background: #fff; color: #334155; }
.added-popup-secondary:hover { background: #f1f5f9; }
.added-popup-primary { border: 0; background: linear-gradient(135deg, #0d9488, #0f766e); color: #fff; box-shadow: 0 8px 18px rgb(13 148 136 / 30%); }
.added-popup-primary:hover { background: linear-gradient(135deg, #0f766e, #115e59); }
@media (max-width: 420px) { .added-popup-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .added-popup, .added-popup-overlay { transition: none; } }
.cart-summary .cart-shipping-hint { margin: 0 0 4px; padding: 9px 11px; border-radius: 8px; background: #f0fdf4; color: #166534; font-size: 11px; line-height: 1.45; }
.cart-summary .cart-shipping-hint[hidden] { display: none; }

/* ===== Alerta promocional con slider de productos ===== */
.promo-alert-box.has-slider { max-width: 520px; padding: 32px 28px 28px; }
.promo-alert-box.has-slider .promo-content h2 { font-size: 1.6rem; margin-bottom: 10px; }
.promo-alert-box.has-slider .promo-content > p { margin-bottom: 18px; font-size: 1rem; }
.promo-slider { position: relative; overflow: hidden; border-radius: 18px; background: #f8fafc; touch-action: pan-y; user-select: none; }
.promo-track { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.promo-slide { flex: 0 0 100%; min-width: 0; padding: 18px 18px 22px; }
.promo-slide .promo-image-link { margin-bottom: 12px; }
.promo-slide .promo-product-image { max-width: 100%; height: 190px; background: transparent; }
.promo-content .promo-slide-name { display: -webkit-box; margin: 0 0 6px; overflow: hidden; color: #232f3e; font-size: 1rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.promo-content .promo-slide-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 14px; }
.promo-slide-price strong { color: #b12704; font-size: 1.5rem; }
.promo-slide-price s { color: #94a3b8; font-size: .95rem; }
.promo-slide .promo-cta-button { padding: 12px 24px; font-size: 1rem; }
.promo-nav { position: absolute; top: 88px; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / 92%); color: #232f3e; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 3px 10px rgb(0 0 0 / 22%); transition: background .18s, transform .18s; }
.promo-nav:hover { background: #ffd814; transform: scale(1.08); }
.promo-prev { left: 8px; }
.promo-next { right: 8px; }
.promo-dots { display: flex; justify-content: center; gap: 7px; padding: 0 0 14px; background: #f8fafc; }
.promo-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: #cbd5e1; cursor: pointer; transition: width .2s, background .2s; }
.promo-dot.is-active { width: 24px; background: #ff9900; }
@media (max-width: 480px) { .promo-alert-box.has-slider { padding: 26px 16px 20px; } .promo-slide .promo-product-image { height: 150px; } .promo-nav { top: 66px; } }
@media (prefers-reduced-motion: reduce) { .promo-track { transition: none; } }

/* Administración: selector de productos del slider */
.admin-promo-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px; }
.admin-promo-option { position: relative; display: block; cursor: pointer; }
.admin-promo-option input { position: absolute; top: 8px; left: 8px; z-index: 1; width: 18px; height: 18px; min-height: 0; accent-color: #0d9488; }
.admin-promo-card { display: grid; gap: 4px; height: 100%; padding: 8px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s, opacity .18s; }
.admin-promo-card img { display: block; width: 100%; height: 100px; border-radius: 8px; background: #f8fafc; object-fit: contain; }
.admin-promo-card strong { display: -webkit-box; overflow: hidden; color: #0f172a; font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.admin-promo-card small { color: #64748b; font-size: 11px; }
.admin-promo-option input:checked + .admin-promo-card { border-color: #0d9488; background: #f0fdfa; box-shadow: 0 0 0 3px rgb(13 148 136 / 15%); }
.admin-promo-option input:disabled + .admin-promo-card { opacity: .45; cursor: not-allowed; }
.admin-promo-count { color: #64748b; font-size: 12px; font-weight: 600; }

/* Ventana "añadido al carrito": imagen del producto + un solo botón */
.added-popup { display: grid; gap: 18px; width: min(100%, 360px); padding: 24px; }
.added-popup-image { display: block; width: 100%; height: 230px; border-radius: 14px; background: #f8fafc; object-fit: contain; }
.added-popup-image[hidden] { display: none; }
.added-popup-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px rgb(5 150 105 / 32%); transition: transform .18s, box-shadow .18s; }
.added-popup-button:hover, .added-popup-button:focus-visible { transform: translateY(-1px); box-shadow: 0 14px 28px rgb(5 150 105 / 40%); }
.added-popup-button svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.added-popup-description { margin: -4px 0 0; color: #475569; font-size: 13.5px; line-height: 1.55; text-align: left; overflow-wrap: anywhere; }
.added-popup-description[hidden] { display: none; }
.added-popup { width: min(100%, 400px); }
.added-popup-button { gap: 12px; padding: 0 20px 0 7px; }
.added-popup-button-img { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; background: rgb(255 255 255 / 22%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); }
.added-popup-button-img svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.added-popup.is-cleared { justify-items: center; gap: 14px; padding: 30px 26px 24px; text-align: center; }
.added-popup.is-cleared .added-popup-icon { margin: 0; }
.added-popup.is-cleared h2 { margin: 0 0 6px; }
.added-popup.is-cleared .added-popup-button { width: 100%; }

/* Ventana "añadido al carrito": botón negro + botón "Ver carrito" */
.added-popup:not(.is-cleared) .added-popup-button { background: #111; box-shadow: 0 10px 22px rgb(0 0 0 / 30%); }
.added-popup:not(.is-cleared) .added-popup-button:hover, .added-popup:not(.is-cleared) .added-popup-button:focus-visible { background: #2a2a2a; box-shadow: 0 14px 28px rgb(0 0 0 / 38%); }
.added-popup:not(.is-cleared) .added-popup-button-img { background: rgb(255 255 255 / 16%); }
.added-popup-cart-link { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: -6px; border: 2px solid #111; border-radius: 14px; background: #fff; color: #111; font-size: 15px; font-weight: 800; text-decoration: none; transition: background-color .18s, color .18s, transform .18s; }
.added-popup-cart-link:hover, .added-popup-cart-link:focus-visible { background: #111; color: #fff; transform: translateY(-1px); }
.added-popup-checkout-link { display: flex; align-items: center; justify-content: center; min-height: 50px; margin-top: -6px; border-radius: 14px; background: #ffd814; color: #111; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgb(255 216 20 / 40%); transition: background-color .18s, transform .18s, box-shadow .18s; }
.added-popup-checkout-link:hover, .added-popup-checkout-link:focus-visible { background: #f7ca00; transform: translateY(-1px); box-shadow: 0 12px 24px rgb(255 216 20 / 50%); }

/* Franja superior centrada: envío gratis */
.shipping-strip { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 14px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .3px; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / 35%); background: linear-gradient(90deg, #e63946, #ff9f1c, #2ec4b6, #3a86ff, #8338ec, #e63946); background-size: 300% 100%; animation: shipping-colors 6s linear infinite; }
.shipping-strip strong { font-weight: 900; font-size: 1.15em; padding: 1px 8px; border-radius: 99px; background: rgb(255 255 255 / 92%); color: #202020; text-shadow: none; }
.shipping-strip-text { display: inline-block; animation: shipping-shake .6s ease-in-out infinite; }
.shipping-strip-icon { display: inline-block; font-size: 1.3em; animation: shipping-shake .6s ease-in-out infinite reverse; }
@keyframes shipping-colors { from { background-position: 0% 0; } to { background-position: 300% 0; } }
@keyframes shipping-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-2px, 1px) rotate(-1deg); }
  30% { transform: translate(2px, -1px) rotate(1deg); }
  45% { transform: translate(-2px, -1px) rotate(-.7deg); }
  60% { transform: translate(2px, 1px) rotate(.7deg); }
  75% { transform: translate(-1px, 0) rotate(-.4deg); }
}
@media (max-width: 480px) { .shipping-strip { font-size: 12px; padding: 7px 10px; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .shipping-strip, .shipping-strip-text, .shipping-strip-icon { animation: none; } }

/* ===== Animaciones que destacan la alerta de ofertas del día ===== */
.promo-alert-box { animation: promoSlideUp .5s cubic-bezier(.175, .885, .32, 1.275), promoGlow 1.8s ease-in-out .5s infinite; }
.promo-badge { position: relative; overflow: hidden; background: linear-gradient(90deg, #ff9900, #ff4d2e, #ff9900); background-size: 200% 100%; color: #fff; animation: promoBadgePulse 1.1s ease-in-out infinite, promoBadgeColors 2.4s linear infinite; }
.promo-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 65%) 50%, transparent 70%); transform: translateX(-120%); animation: promoShine 2.2s ease-in-out infinite; }
.promo-content h2 { animation: promoTitlePop 2.4s ease-in-out infinite; transform-origin: center; }
.promo-slide-price strong { display: inline-block; animation: promoPriceBeat 1.3s ease-in-out infinite; }
.promo-cta-button { position: relative; overflow: hidden; animation: promoCtaPulse 1.5s ease-in-out infinite; }
.promo-cta-button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 70%) 50%, transparent 70%); transform: translateX(-130%); animation: promoShine 2.6s ease-in-out .4s infinite; pointer-events: none; }
@keyframes promoGlow {
  0%, 100% { box-shadow: 0 25px 50px rgba(0, 0, 0, .4), 0 0 0 0 rgb(255 153 0 / 0%), 0 0 22px 4px rgb(255 153 0 / 45%); }
  50% { box-shadow: 0 25px 50px rgba(0, 0, 0, .4), 0 0 0 6px rgb(255 77 46 / 35%), 0 0 46px 14px rgb(255 77 46 / 65%); }
}
@keyframes promoBadgePulse { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.12) rotate(-3deg); } 75% { transform: scale(1.12) rotate(3deg); } }
@keyframes promoBadgeColors { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes promoShine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
@keyframes promoTitlePop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes promoPriceBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } 60% { transform: scale(1); } }
@keyframes promoCtaPulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255, 216, 20, .4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255, 216, 20, .25), 0 8px 24px rgba(255, 216, 20, .7); } }
@media (prefers-reduced-motion: reduce) {
  .promo-alert-box, .promo-badge, .promo-badge::after, .promo-content h2, .promo-slide-price strong, .promo-cta-button, .promo-cta-button::after { animation: none; }
}

/* Ficha de producto: «Comprar» y «Añadir al carrito» uno debajo del otro */
.detail-actions { display: grid; gap: 10px; width: min(100%, 320px); margin-top: 6px; }
.detail-actions .detail-add-button { width: 100%; min-width: 0; height: 48px; gap: 9px; border-radius: 10px; font-size: 14px; font-weight: 800; }
.detail-actions .detail-cart-button { border: 2px solid var(--green, #26382d); background: #fff; color: var(--green, #26382d); }
.detail-actions .detail-cart-button:hover:not(:disabled) { background: var(--green, #26382d); color: #fff; }
.detail-actions .detail-add-button:disabled { opacity: .55; cursor: not-allowed; }

/* Administración: slider de portada */
.admin-count-chip { padding: 5px 12px; border-radius: 99px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 700; }
.admin-hero-new { margin: 0 0 18px; border: 1px dashed #c7d2fe; border-radius: 12px; background: #f8f9ff; }
.admin-hero-new > summary { padding: 13px 16px; color: #3730a3; font-weight: 800; cursor: pointer; }
.admin-hero-create-form { margin: 0 14px 14px; }
.admin-hero-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-hero-slide-form .admin-field input[type="text"], .admin-hero-slide-form .admin-field input[type="number"] { width: 100%; }
.admin-hero-actions { display: flex; gap: 8px; }
.admin-hero-actions .admin-action-button { flex: 1; }
.admin-hero-slide-form h3 small { color: #64748b; font-weight: 600; }
.admin-hero-slide-form.is-hidden-slide { opacity: .6; }
@media (max-width: 700px) { .admin-hero-fields { grid-template-columns: 1fr; } }

/* ==========================================================================
   Slider de portada: título animado y detalles
   ========================================================================== */
.hero .hero-content > * { transition-delay: 0s; }
.hero .hero-animated-title { text-shadow: none; text-wrap: balance; letter-spacing: -2.4px; }
.hero-line { display: block; }
.hero-word { display: inline-block; overflow: hidden; padding: .04em .03em .14em; margin: -.04em -.03em -.14em; vertical-align: top; }
.hero-word > span {
  display: inline-block;
  transform: translateY(115%) rotate(7deg);
  transform-origin: 0 100%;
  opacity: 0;
  filter: blur(7px);
  background: linear-gradient(100deg, #243a2b 0%, #2c4132 38%, #2f9a5d 48%, #e9945a 56%, #2c4132 66%, #243a2b 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: transform .45s ease, opacity .35s ease, filter .35s ease;
}
.hero-slide.is-active .hero-word > span {
  transform: none; opacity: 1; filter: blur(0);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s ease, filter .8s ease;
  transition-delay: calc(.32s + var(--i) * .11s);
  animation: heroShimmer 6s linear calc(1.4s + var(--i) * .11s) infinite;
}
@keyframes heroShimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }

/* Línea que se dibuja bajo el título */
.hero-title-rule { display: block; width: 0; height: 4px; margin: 18px 0 0; border-radius: 4px; background: linear-gradient(90deg, #e9945a, #f2c14e, #3ea66b); transition: width .3s ease; }
.hero-slide.is-active .hero-title-rule { width: 84px; transition: width .9s cubic-bezier(.16, 1, .3, 1) .9s; }
.hero-description { margin-top: 16px; }

/* Etiqueta superior con punto que late */
.hero .eyebrow span { animation: heroDot 1.8s ease-in-out infinite; }
@keyframes heroDot { 0%, 100% { box-shadow: 0 0 0 0 rgb(233 148 90 / 55%); transform: scale(1); } 50% { box-shadow: 0 0 0 7px rgb(233 148 90 / 0%); transform: scale(1.25); } }

/* Botón con destello */
.hero-cta { position: relative; overflow: hidden; padding: 14px 22px; border-radius: 999px; font-size: 12px; letter-spacing: .3px; box-shadow: 0 10px 24px -8px rgb(31 46 34 / 55%); }
.hero-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 40%) 50%, transparent 65%); transform: translateX(-130%); animation: heroCtaShine 3.4s ease-in-out 1.6s infinite; pointer-events: none; }
.hero-cta span { display: inline-grid; place-items: center; line-height: 1; transition: transform .25s; }
.hero-cta:hover span { transform: translateX(5px); }
@keyframes heroCtaShine { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(130%); } }

/* Formas decorativas flotantes */
.hero-deco { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1s ease .4s; }
.hero-slide.is-active .hero-deco { opacity: 1; }
.hero-deco-a { top: 12%; right: 11%; width: 120px; height: 120px; background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 85%), rgb(242 193 78 / 55%) 55%, rgb(242 193 78 / 0%) 72%); animation: heroFloat 7s ease-in-out infinite; }
.hero-deco-b { bottom: 20%; right: 24%; width: 70px; height: 70px; background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 85%), rgb(62 166 107 / 50%) 55%, rgb(62 166 107 / 0%) 72%); animation: heroFloat 9s ease-in-out -2s infinite reverse; }
.hero-deco-c { top: 46%; right: 5%; width: 46px; height: 46px; background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 90%), rgb(233 148 90 / 55%) 58%, rgb(233 148 90 / 0%) 74%); animation: heroFloat 6s ease-in-out -4s infinite; }
@keyframes heroFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14px, -22px) scale(1.12); } }
.hero-content { position: relative; z-index: 1; }

/* Barra de progreso en el indicador activo */
.hero-pagination button.active span { position: relative; overflow: hidden; background: rgb(44 65 50 / 22%); }
.hero-pagination button.active span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--green); }
.hero.is-playing .hero-pagination button.active span::after { animation: heroProgress 3s linear forwards; }
@keyframes heroProgress { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

.hero-arrow { backdrop-filter: blur(6px); box-shadow: 0 6px 16px -6px rgb(0 0 0 / 30%); transition: background .2s, color .2s, transform .2s; }
.hero-arrow:hover { transform: translateY(-50%) scale(1.08); }

@media (max-width: 640px) {
  .hero .hero-animated-title { letter-spacing: -1.6px; }
  .hero-deco-a { width: 80px; height: 80px; }
  .hero-deco-b, .hero-deco-c { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word > span, .hero-slide.is-active .hero-word > span { transform: none; opacity: 1; filter: none; animation: none; transition: none; }
  .hero-title-rule, .hero-slide.is-active .hero-title-rule { width: 84px; transition: none; }
  .hero-deco, .hero .eyebrow span, .hero-cta::after, .hero.is-playing .hero-pagination button.active span::after { animation: none; }
}

/* ===== «Producto añadido al carrito»: animación que se cierra sola ===== */
.added-popup-overlay.added-flash { background: rgb(15 23 42 / 28%); backdrop-filter: blur(2px); cursor: pointer; }
.added-flash-card { position: relative; display: grid; justify-items: center; gap: 8px; width: min(88vw, 340px); padding: 30px 24px 26px; overflow: hidden; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 30px 70px rgb(15 23 42 / 35%); transform: translateY(26px) scale(.85); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.3, .3, 1), opacity .25s ease; }
.added-popup-overlay.is-visible .added-flash-card { transform: none; opacity: 1; }
.added-flash-icon { display: grid; width: 78px; height: 78px; place-items: center; margin-bottom: 4px; }
.added-flash-icon svg { width: 78px; height: 78px; overflow: visible; }
.added-flash-circle { fill: #ecfdf5; stroke: #10b981; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; transform-origin: center; }
.added-flash-check { fill: none; stroke: #059669; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.added-popup-overlay.is-visible .added-flash-circle { animation: flashDraw .5s ease-out .1s forwards, flashPop .5s cubic-bezier(.2, 1.6, .4, 1) .55s; }
.added-popup-overlay.is-visible .added-flash-check { animation: flashDraw .35s ease-out .5s forwards; }
.added-flash-title { color: #0f172a; font-family: "Inter", "DM Sans", sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.3px; opacity: 0; transform: translateY(8px); }
.added-flash-name { max-width: 100%; color: #64748b; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; }
.added-popup-overlay.is-visible .added-flash-title { animation: flashIn .4s ease .45s forwards; }
.added-popup-overlay.is-visible .added-flash-name { animation: flashIn .4s ease .6s forwards; }
.added-flash-name:empty { display: none; }
.added-flash-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg, #10b981, #34d399); transform-origin: left; transform: scaleX(1); }
.added-popup-overlay.is-visible .added-flash-bar { animation: flashBar 2s linear forwards; }
.added-flash-confetti i { position: absolute; top: 56px; left: 50%; width: 8px; height: 8px; border-radius: 2px; opacity: 0; }
.added-flash-confetti i:nth-child(1) { background: #f59e0b; --x: -96px; --y: -34px; }
.added-flash-confetti i:nth-child(2) { background: #10b981; --x: 92px; --y: -40px; }
.added-flash-confetti i:nth-child(3) { background: #3b82f6; --x: -70px; --y: 30px; }
.added-flash-confetti i:nth-child(4) { background: #ef4444; --x: 78px; --y: 34px; }
.added-flash-confetti i:nth-child(5) { background: #8b5cf6; --x: -28px; --y: -62px; }
.added-flash-confetti i:nth-child(6) { background: #ec4899; --x: 30px; --y: -60px; }
.added-popup-overlay.is-visible .added-flash-confetti i { animation: flashConfetti .9s ease-out .6s forwards; }
@keyframes flashDraw { to { stroke-dashoffset: 0; } }
@keyframes flashPop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes flashIn { to { opacity: 1; transform: none; } }
@keyframes flashBar { to { transform: scaleX(0); } }
@keyframes flashConfetti { 0% { opacity: 1; transform: translate(-50%, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(260deg) scale(.4); } }
.cart-button.cart-bump { animation: cartBump .6s ease .1s; }
@keyframes cartBump { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.96) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .added-flash-card { transition: none; }
  .added-flash-circle, .added-flash-check { stroke-dashoffset: 0; animation: none !important; }
  .added-flash-title, .added-flash-name { opacity: 1; transform: none; animation: none !important; }
  .added-flash-confetti { display: none; }
}

/* Botones «Comprar» y «Añadir al carrito» centrados */
.detail-actions { margin: 18px auto 6px; justify-items: center; }
.detail-actions .detail-add-button { justify-content: center; text-align: center; }
.detail-actions .detail-add-button .buy-label { flex: 0 1 auto; }
.product-buy-row { justify-items: center; text-align: center; }
.product-buy-row .product-price { display: block; width: 100%; text-align: center; }
.product-buy-row .add-button { width: 100%; justify-content: center; text-align: center; }

/* Zoom al pasar el ratón por los productos (escritorio con ratón) */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .products-grid .product-card { transition: transform .25s ease, box-shadow .25s ease; }
  .products-grid .product-card:hover,
  .home-style-refresh .products-grid .product-card:hover {
    z-index: 5;
    transform: scale(1.10);
    box-shadow: 0 18px 38px rgb(38 51 39 / 22%);
  }
  /* Las columnas de los extremos crecen hacia dentro para no salirse de la pantalla */
  .products-grid .product-card:nth-child(4n + 1) { transform-origin: left center; }
  .products-grid .product-card:nth-child(4n) { transform-origin: right center; }
  .products-grid .product-card .product-image { transition: transform .3s ease; }
  .products-grid .product-card:hover .product-image { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .products-grid .product-card, .products-grid .product-card .product-image { transition: none; }
}

/* Imagen del producto en la ventana «Producto añadido al carrito» */
.added-flash-image { display: block; width: 100%; max-width: 220px; height: 170px; margin: 4px auto 2px; border-radius: 14px; background: #f6f6f2; object-fit: contain; box-shadow: 0 6px 18px rgb(15 23 42 / 12%); opacity: 0; }
.added-flash-image[hidden] { display: none; }
.added-popup-overlay.is-visible .added-flash-image { animation: flashIn .4s ease .5s forwards; }
@media (prefers-reduced-motion: reduce) { .added-flash-image { opacity: 1; animation: none !important; } }

/* Aviso de cookies */
.cookie-banner { position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 300; display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 900px; margin: 0 auto; padding: 16px 20px; border: 1px solid #e7e1f0; border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgb(15 23 42 / 22%); }
.cookie-banner[hidden] { display: none; }
.cookie-banner-text strong { display: block; margin-bottom: 4px; color: #0f172a; font-size: 15px; }
.cookie-banner-text p { margin: 0; color: #475569; font-size: 13px; line-height: 1.5; }
.cookie-banner-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.cookie-btn { min-height: 42px; padding: 0 20px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cookie-btn-primary { border: 0; background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.cookie-btn-secondary { border: 1.5px solid #cbd5e1; background: #fff; color: #334155; }
.cookie-btn:focus-visible, .cookie-settings-link:focus-visible { outline: 3px solid #0d9488; outline-offset: 2px; }
.cookie-settings-link { display: block; margin: 8px auto 0; padding: 4px 8px; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; opacity: .8; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Páginas legales y enlaces del pie */
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; }
.footer-legal a { color: #c2c2c2; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: #fff; }
.legal-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; max-width: 1100px; margin: 32px auto; padding: 0 20px; }
.legal-nav { position: sticky; top: 16px; align-self: start; display: grid; gap: 4px; }
.legal-nav a { padding: 9px 12px; border-radius: 8px; color: #334155; font-size: 14px; text-decoration: none; }
.legal-nav a:hover { background: #f1f5f9; }
.legal-nav a.is-active { background: #ecfdf5; color: #047857; font-weight: 700; }
.legal-content { min-width: 0; padding: 28px 32px; border: 1px solid #e7e1f0; border-radius: 12px; background: #fff; color: #1e293b; line-height: 1.65; }
.legal-content h1 { margin: 0 0 4px; font-size: 28px; }
.legal-content h2 { margin: 26px 0 8px; font-size: 18px; }
.legal-content p, .legal-content li { font-size: 14.5px; overflow-wrap: anywhere; }
.legal-content ul { padding-left: 22px; }
.legal-updated { margin: 0 0 8px; color: #64748b; font-size: 13px !important; }
.legal-missing { padding: 1px 6px; border-radius: 4px; background: #fef08a; color: #713f12; font-weight: 700; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { padding: 9px 12px; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.legal-table th { background: #f8fafc; }
.legal-form { margin: 12px 0; padding: 4px 18px; border-left: 4px solid #10b981; background: #f8fafc; }
.cookie-settings-inline { padding: 0; border: 0; background: none; color: #047857; font: inherit; text-decoration: underline; cursor: pointer; }
.cookie-banner-text a { color: #047857; }
@media (max-width: 800px) {
  .legal-page { grid-template-columns: 1fr; gap: 16px; margin: 20px auto; }
  .legal-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .legal-content { padding: 20px 16px; }
}

/* Indicaciones de IVA incluido */
.cart-item-price small, .vat-note { margin-left: 4px; color: #64748b; font-size: 11px; font-weight: 500; }