/* ==================================================== Kinder Shop — "Supplier catalogue" design layer (catalogue.css) Parchment paper, cocoa ink, ruled lines, notched product labels, origin stamps, dotted-leader spec rows, perforated tickets, mono codes. Red only for buying. Loaded after main / components / woocommerce so it wins without !important. ==================================================== */ /* === 1. BASE === */ .kinder-page-wrapper, .kinder-site-footer { overflow-x: clip; } body { background: var(--kinder-bg); color: var(--kinder-text); font-size: 15.5px; } h1, h2, h3, h4 { font-family: var(--kinder-font-heading); font-weight: 600; text-wrap: balance; color: inherit; } .kinder-mono { font-family: var(--kinder-font-mono); letter-spacing: 0.02em; } html[dir="ltr"] .kinder-icon--dir { transform: scaleX(-1); } :focus-visible { outline: 2px solid var(--kinder-accent); outline-offset: 2px; } .kinder-container--wide { max-width: 1480px; } .kinder-label { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--kinder-font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kinder-caramel); } .kinder-label b { color: var(--kinder-text); font-weight: 600; } .kinder-sec { padding-block: clamp(2.8rem, 6vw, 4.8rem); border-top: 1px solid var(--kinder-border); } .kinder-sec--kraft { background: var(--kinder-surface-alt); } .kinder-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; } .kinder-sec-head > div { min-width: 0; } .kinder-sec-title { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; margin: 0.35rem 0 0; } .kinder-sec-lead { color: var(--kinder-text-muted); max-width: 56ch; margin: 0.3rem 0 0; } .kinder-lnk { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 600; color: var(--kinder-text); border-bottom: 1px solid var(--kinder-border-2); padding-bottom: 2px; } .kinder-lnk:hover { color: var(--kinder-accent); border-color: var(--kinder-accent); } /* Buttons */ .kinder-btn { min-height: 46px; padding: 0.6rem 1.2rem; border-radius: var(--kinder-radius-sm); border: 1.5px solid transparent; font-weight: 600; gap: 0.5rem; transition: background 0.2s, color 0.2s, border-color 0.2s; } .kinder-btn svg { width: 19px; height: 19px; flex: none; } .kinder-btn:active { transform: none; } .kinder-btn--primary { background: var(--kinder-accent); border-color: var(--kinder-accent); color: #fff; } .kinder-btn--primary:hover { background: var(--kinder-accent-hover); border-color: var(--kinder-accent-hover); color: #fff; box-shadow: none; } .kinder-btn--line, .kinder-btn--outline, .kinder-btn--ghost { background: transparent; border-color: var(--kinder-text); color: var(--kinder-text); } .kinder-btn--line:hover, .kinder-btn--outline:hover, .kinder-btn--ghost:hover { background: var(--kinder-text); border-color: var(--kinder-text); color: var(--kinder-bg); } .kinder-btn--dark { background: var(--kinder-text); border-color: var(--kinder-text); color: var(--kinder-bg); } .kinder-btn--dark:hover { opacity: 0.9; color: var(--kinder-bg); } .kinder-btn--wa { background: var(--kinder-wa); border-color: var(--kinder-wa); color: #fff; } .kinder-btn--wa:hover { background: #1A9149; border-color: #1A9149; color: #fff; box-shadow: none; } .kinder-btn--sm { min-height: 38px; padding: 0.35rem 0.8rem; font-size: 0.86rem; } .kinder-btn--block { width: 100%; } /* Flags & stamps */ .kinder-flag { display: inline-flex; align-items: center; font-family: var(--kinder-font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.18rem 0.45rem; border-radius: 4px; background: var(--kinder-text); color: var(--kinder-bg); line-height: 1.3; } .kinder-flag--red { background: var(--kinder-accent); color: #fff; } .kinder-flag--line { background: var(--kinder-bg); color: var(--kinder-text); border: 1px solid var(--kinder-text); } .kinder-stamp { position: absolute; z-index: 4; width: 112px; height: 112px; border-radius: 50%; border: 2px dashed var(--kinder-accent); color: var(--kinder-accent); display: grid; place-items: center; text-align: center; transform: rotate(-14deg); background: color-mix(in srgb, var(--kinder-bg) 72%, transparent); font-family: var(--kinder-font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.45; pointer-events: none; } .kinder-stamp b { display: block; font-family: var(--kinder-font-heading); font-size: 1.15rem; letter-spacing: 0; } .kinder-stamp--cover { top: 4%; inset-inline-start: -3%; } .kinder-stamp--gallery { bottom: 1.2rem; inset-inline-end: 1.2rem; } .kinder-stamp--photo { bottom: 1rem; inset-inline-start: 1rem; } /* === 2. HEADER === */ .kinder-util { background: #3A1C11; color: #F3E2CF; font-size: 0.82rem; } .kinder-util__in { display: flex; gap: 1.4rem; align-items: center; min-height: 38px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .kinder-util__item { display: inline-flex; gap: 0.4rem; align-items: center; color: inherit; } .kinder-util__item svg { width: 15px; height: 15px; opacity: 0.8; } .kinder-util__phone { font-family: var(--kinder-font-mono); } .kinder-util__phone:hover { color: #fff; } .kinder-util__quote { margin-inline-start: auto; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .kinder-util__quote:hover { color: #fff; border-color: #fff; } @media (max-width: 760px) { .kinder-util__in { gap: 0.9rem; font-size: 0.78rem; } .kinder-util__in > span.kinder-util__item ~ span.kinder-util__item, .kinder-util__phone { display: none; } } .kinder-site-header { background: var(--kinder-bg); border-bottom: 0; color: var(--kinder-text); box-shadow: none; } .kinder-site-header.is-scrolled { box-shadow: 0 8px 20px -18px rgba(58, 28, 17, 0.5); } .kinder-navbar { border-bottom: 1px solid var(--kinder-border); } .kinder-navbar__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; height: auto; min-height: var(--kinder-header-h); } .kinder-navbar__logo-link { gap: 0.7rem; color: var(--kinder-text); } .kinder-navbar__logo-img { width: 50px; height: 50px; border-radius: 50%; } .kinder-navbar__logo-ar { font-family: var(--kinder-font-heading); font-size: 1.35rem; font-weight: 600; color: var(--kinder-text); line-height: 1.1; white-space: nowrap; } .kinder-navbar__logo-tagline { font-family: var(--kinder-font-mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--kinder-caramel); } .kinder-search { position: relative; display: flex; align-items: stretch; border: 1.5px solid var(--kinder-text); border-radius: var(--kinder-radius-sm); background: var(--kinder-surface-card); max-width: 680px; width: 100%; justify-self: center; } .kinder-search__cat { border: 0; border-inline-end: 1px solid var(--kinder-border-2); background: var(--kinder-surface-alt); padding-inline: 0.8rem; font-size: 0.86rem; max-width: 40%; color: var(--kinder-text); border-start-start-radius: 6px; border-end-start-radius: 6px; } .kinder-search__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.7rem 0.9rem; outline: none; color: var(--kinder-text); font: inherit; } .kinder-search__input::placeholder { color: var(--kinder-text-light); } .kinder-search__go { border: 0; background: var(--kinder-text); color: var(--kinder-bg); padding-inline: 1rem; cursor: pointer; display: grid; place-items: center; border-start-end-radius: 6px; border-end-end-radius: 6px; } .kinder-search__go svg { width: 20px; height: 20px; } .kinder-search .kinder-live-search__results { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 60; background: var(--kinder-surface-card); border: 1px solid var(--kinder-border-2); border-radius: var(--kinder-radius-md); box-shadow: var(--kinder-shadow-lg); max-height: 380px; overflow: auto; padding: 0.4rem; } .kinder-search-item__info span { color: var(--kinder-accent); font-family: var(--kinder-font-mono); } .kinder-navbar__actions { display: flex; gap: 0.2rem; align-items: center; } .kinder-navbar__icon-btn { width: 44px; height: 44px; color: var(--kinder-text); border-radius: var(--kinder-radius-sm); } .kinder-navbar__icon-btn:hover { background: var(--kinder-surface-alt); color: var(--kinder-text); } .kinder-act { position: relative; display: flex; align-items: center; gap: 0.45rem; min-height: 46px; padding: 0.3rem 0.7rem; border-radius: var(--kinder-radius-sm); border: 1px solid transparent; background: none; color: var(--kinder-text); cursor: pointer; font: inherit; } .kinder-act:hover { border-color: var(--kinder-border-2); color: var(--kinder-text); } .kinder-act > svg { width: 22px; height: 22px; flex: none; } .kinder-act__t { display: flex; flex-direction: column; line-height: 1.2; text-align: start; } .kinder-act__t small { font-size: 0.72rem; color: var(--kinder-text-muted); } .kinder-act__t b { font-family: var(--kinder-font-mono); font-size: 0.84rem; font-weight: 600; white-space: nowrap; } .kinder-act__t b .woocommerce-Price-currencySymbol { font-family: var(--kinder-font-body); } .kinder-act__n, .kinder-site-header .kinder-cart-count { position: absolute; inset: 2px auto auto auto; inset-inline-start: 24px; width: auto; min-width: 18px; max-width: 34px; transform: none; box-sizing: border-box; line-height: 18px; height: 18px; border-radius: 9px; background: var(--kinder-accent); color: #fff; font: 600 0.68rem/18px var(--kinder-font-mono); text-align: center; padding-inline: 4px; } .kinder-deps { background: var(--kinder-bg); border-bottom: 1px solid var(--kinder-border); } .kinder-deps__in { display: flex; align-items: center; gap: 0.1rem; overflow-x: auto; scrollbar-width: none; } .kinder-deps__in > a { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.85rem; font-size: 0.9rem; font-weight: 500; white-space: nowrap; color: var(--kinder-text); border-bottom: 2px solid transparent; } .kinder-deps__in > a svg { width: 18px; height: 18px; color: var(--kinder-caramel); } .kinder-deps__in > a:hover, .kinder-deps__in > a.is-active { color: var(--kinder-accent); border-color: var(--kinder-accent); } .kinder-deps__all { font-weight: 700 !important; } .kinder-deps .kinder-nav-menu { margin-inline-start: auto; display: flex; gap: 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--kinder-border); } .kinder-deps .kinder-nav-menu > li > a { padding: 0.7rem 0.75rem; font-size: 0.86rem; font-weight: 500; color: var(--kinder-text-muted); border-radius: 0; background: none; } .kinder-deps .kinder-nav-menu > li > a:hover, .kinder-deps .kinder-nav-menu > li.current-menu-item > a { color: var(--kinder-accent); background: none; } .kinder-mobile-menu-toggle { display: none; } .kinder-mobile-deps a { display: flex !important; gap: 0.6rem; align-items: center; } .kinder-mobile-deps svg { width: 18px; height: 18px; color: var(--kinder-caramel); } .kinder-socials--menu a { border-color: var(--kinder-border); color: var(--kinder-text); } @media (max-width: 1100px) { .kinder-act__t { display: none; } } @media (max-width: 1440px) { .kinder-deps .kinder-nav-menu { display: none; } .kinder-deps__in { justify-content: space-between; } .kinder-deps__in > a { padding-inline: 0.5rem; font-size: 0.86rem; gap: 0.35rem; } } @media (max-width: 1023px) { .kinder-navbar__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem; padding-block: 0.6rem; } .kinder-mobile-menu-toggle { display: flex; } .kinder-search { grid-column: 1 / -1; order: 3; max-width: none; } .kinder-navbar__logo { justify-self: start; } .kinder-deps { display: none; } } @media (max-width: 520px) { .kinder-navbar__logo-tagline { display: none; } .kinder-navbar__logo-img { width: 40px; height: 40px; } .kinder-navbar__logo-ar { font-size: 1.12rem; } .kinder-search__cat { display: none; } .kinder-wishlist-open-btn, .kinder-dark-mode-toggle { display: none; } .kinder-act { padding: 0.3rem 0.45rem; } } /* === 3. CATALOGUE COVER (hero) === */ .kinder-cover { padding-block: clamp(2rem, 5vw, 3.6rem) clamp(2.6rem, 6vw, 4.4rem); } .kinder-cover__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; } .kinder-cover__issue { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; font-family: var(--kinder-font-mono); font-size: 0.76rem; letter-spacing: 0.12em; color: var(--kinder-text-muted); padding-bottom: 0.9rem; border-bottom: 1px dashed var(--kinder-border-2); } .kinder-cover__issue b { color: var(--kinder-text); font-weight: 600; } .kinder-cover__title { font-size: clamp(2.1rem, 4.8vw, 3.9rem); line-height: 1.18; margin: 1.2rem 0 0; } .kinder-cover__title u { text-decoration: none; background: linear-gradient(transparent 62%, var(--kinder-accent-soft) 62%); padding-inline: 0.1em; } .kinder-cover__tagline { font-family: var(--kinder-font-mono); font-size: clamp(0.9rem, 1.4vw, 1.05rem); margin: 1rem 0 0; color: var(--kinder-text); text-align: right; } html[dir="ltr"] .kinder-cover__tagline { text-align: left; } .kinder-cover__tagline em { color: var(--kinder-accent); font-style: normal; } .kinder-cover__lead { color: var(--kinder-text-muted); max-width: 54ch; margin: 0.9rem 0 0; font-size: 1.02rem; } .kinder-cover__search { display: flex; margin-top: 1.6rem; border: 2px solid var(--kinder-text); border-radius: var(--kinder-radius-md); overflow: hidden; background: var(--kinder-surface-card); box-shadow: 6px 6px 0 var(--kinder-kraft); } .kinder-cover__search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 1rem 1.1rem; font: inherit; font-size: 1.05rem; outline: none; color: var(--kinder-text); } .kinder-cover__search button { border: 0; background: var(--kinder-accent); color: #fff; padding-inline: 1.5rem; font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; } .kinder-cover__search button:hover { background: var(--kinder-accent-hover); } .kinder-cover__quick { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; } .kinder-cover__quick > span { font-size: 0.82rem; color: var(--kinder-text-muted); } .kinder-qchip { font-size: 0.84rem; padding: 0.3rem 0.75rem; border: 1px solid var(--kinder-border-2); border-radius: 999px; background: var(--kinder-surface-card); color: var(--kinder-text); } .kinder-qchip:hover { border-color: var(--kinder-text); color: var(--kinder-text); } .kinder-cover__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0 0; border-block: 1px solid var(--kinder-border); } .kinder-cover__meta > div { padding: 0.9rem 0.6rem; border-inline-start: 1px solid var(--kinder-border); } .kinder-cover__meta > div:first-child { border-inline-start: 0; } .kinder-cover__meta dt { font-family: var(--kinder-font-mono); font-size: 1.5rem; font-weight: 600; line-height: 1.2; } .kinder-cover__meta dd { margin: 0; font-size: 0.82rem; color: var(--kinder-text-muted); } .kinder-cover__stack { position: relative; aspect-ratio: 1 / 1.05; max-width: 540px; width: 100%; justify-self: center; } .kinder-lbl { position: absolute; width: 56%; background: var(--kinder-surface-card); border: 1px solid var(--kinder-border-2); border-radius: 14px; padding: 0.6rem 0.6rem 0.8rem; box-shadow: 0 24px 40px -26px rgba(58, 28, 17, 0.45); transition: transform 0.5s var(--kinder-ease-out); } .kinder-cover__stack .kinder-lbl img { aspect-ratio: 1 / 1.05; object-fit: cover; width: 100%; height: auto; border-radius: 9px; background: var(--kinder-kraft); } .kinder-lbl__foot { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px dashed var(--kinder-border-2); } .kinder-lbl__foot b { display: block; font-size: 0.88rem; line-height: 1.35; } .kinder-lbl__code { display: block; font-family: var(--kinder-font-mono); font-size: 0.7rem; color: var(--kinder-text-muted); } .kinder-lbl__px { font-family: var(--kinder-font-mono); font-weight: 600; font-size: 0.8rem; background: var(--kinder-accent); color: #fff; padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; } .kinder-lbl--1 { top: 2%; inset-inline-start: 0; transform: rotate(-5deg); z-index: 1; } .kinder-lbl--2 { top: 14%; inset-inline-end: 0; transform: rotate(4deg); z-index: 2; } .kinder-lbl--3 { bottom: 0; inset-inline-start: 20%; transform: rotate(-1.5deg); z-index: 3; } .kinder-cover__stack:hover .kinder-lbl--1 { transform: rotate(-8deg) translate(6%, -2%); } .kinder-cover__stack:hover .kinder-lbl--2 { transform: rotate(7deg) translate(-5%, -3%); } @media (max-width: 900px) { .kinder-cover__grid { grid-template-columns: minmax(0, 1fr); } .kinder-cover__stack { max-width: 430px; } } @media (max-width: 480px) { .kinder-cover__meta dt { font-size: 1.15rem; } .kinder-stamp { width: 90px; height: 90px; } .kinder-lbl__foot b { font-size: 0.76rem; } .kinder-cover__search button { padding-inline: 1rem; } } /* === 4. DEPARTMENT INDEX === */ .kinder-index { border-top: 2px solid var(--kinder-text); } .kinder-index__row { display: grid; grid-template-columns: 44px 84px minmax(0, 1.1fr) minmax(0, 1.6fr) 90px 32px; gap: 1.1rem; align-items: center; padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--kinder-border); color: var(--kinder-text); transition: background 0.2s; } .kinder-index__row:hover { background: var(--kinder-surface-card); color: var(--kinder-text); } .kinder-index__no { font-family: var(--kinder-font-mono); color: var(--kinder-caramel); font-size: 0.85rem; } .kinder-index .kinder-index__img img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--kinder-kraft); } .kinder-index__name { display: flex; gap: 0.5rem; align-items: center; font-family: var(--kinder-font-heading); font-weight: 600; font-size: 1.12rem; } .kinder-index__name svg { width: 20px; height: 20px; color: var(--kinder-caramel); flex: none; } .kinder-index__items { font-size: 0.88rem; color: var(--kinder-text-muted); } .kinder-index__cnt { font-family: var(--kinder-font-mono); font-size: 0.82rem; text-align: end; } .kinder-index__ar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--kinder-border-2); display: grid; place-items: center; transition: 0.2s; } .kinder-index__ar svg { width: 15px; height: 15px; } .kinder-index__row:hover .kinder-index__ar { background: var(--kinder-accent); color: #fff; border-color: var(--kinder-accent); } @media (max-width: 760px) { .kinder-index .kinder-index__img img { width: 64px; height: 52px; } .kinder-index__row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0.8rem; } .kinder-index__no, .kinder-index__items, .kinder-index__ar { display: none; } .kinder-index .kinder-index__img img { width: 64px; height: 52px; } .kinder-index__name { font-size: 1rem; } } /* === 5. SHOP BY BUSINESS (segmented control) === */ .kinder-seg, .kinder-products-tabs .kinder-tabs { display: flex; gap: 0; padding: 0; margin: 0 0 0.2rem; border: 1.5px solid var(--kinder-text); border-radius: var(--kinder-radius-sm); width: fit-content; max-width: 100%; overflow-x: auto; background: transparent; } .kinder-tabs__btn { display: flex; gap: 0.4rem; align-items: center; border: 0; border-radius: 0; border-inline-start: 1px solid var(--kinder-border-2); background: transparent; color: var(--kinder-text); padding: 0.6rem 1rem; font-weight: 600; font-size: 0.9rem; white-space: nowrap; min-height: 42px; } .kinder-tabs__btn:first-child { border-inline-start: 0; } .kinder-tabs__btn svg { width: 17px; height: 17px; } .kinder-tabs__btn.is-active, .kinder-tabs__btn:hover { background: var(--kinder-text); color: var(--kinder-bg); } .kinder-kit { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 1.2rem 0 1rem; padding: 0.8rem 1rem; border: 1px dashed var(--kinder-border-2); border-radius: var(--kinder-radius-md); font-size: 0.92rem; } .kinder-kit b { font-family: var(--kinder-font-heading); font-weight: 600; } .kinder-products-tabs { background: transparent; padding-block: clamp(2.8rem, 6vw, 4.8rem); } .kinder-products-tabs .kinder-sec-head { align-items: center; } .kinder-products-tabs__footer { text-align: center; margin-top: 2rem; } /* === 6. PRODUCT LABEL CARD === */ .kinder-products-grid, body .kinder-wc-main--archive ul.products, .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 1.1rem; } @media (max-width: 560px) { .kinder-products-grid, body .kinder-wc-main--archive ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } } .kinder-product-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--kinder-surface-card); border: 1px solid var(--kinder-border); border-radius: var(--kinder-radius-md); overflow: visible; transition: border-color 0.25s, box-shadow 0.25s; } .kinder-product-card:hover { transform: none; border-color: var(--kinder-text-muted); box-shadow: 5px 5px 0 var(--kinder-kraft); } .kinder-product-card__media { position: relative; margin: 0.55rem 0.55rem 0; border-radius: 9px; overflow: hidden; background: var(--kinder-kraft); aspect-ratio: 1 / 1; } .kinder-product-card__media-link { display: block; height: 100%; } .kinder-product-card .kinder-product-card__img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--kinder-ease-out); } .kinder-product-card:hover .kinder-product-card__img--main { transform: scale(1.05); } .kinder-product-card__badges { position: absolute; top: 0.5rem; inset-inline-start: 0.5rem; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.3rem; z-index: 1; } .kinder-product-card__actions { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; opacity: 0; transform: none; transition: opacity 0.2s; z-index: 1; } .kinder-product-card:hover .kinder-product-card__actions, .kinder-product-card:focus-within .kinder-product-card__actions { opacity: 1; transform: none; } @media (hover: none) { .kinder-product-card__actions { opacity: 1; } } .kinder-product-card .kinder-product-card__action { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--kinder-border-2); background: var(--kinder-surface-card); color: var(--kinder-text); display: grid; place-items: center; } .kinder-product-card .kinder-product-card__action svg { width: 16px; height: 16px; } .kinder-product-card .kinder-product-card__action:hover, .kinder-product-card .kinder-product-card__action.is-wishlisted { background: var(--kinder-accent); border-color: var(--kinder-accent); color: #fff; } .kinder-product-card__label { position: relative; margin: 0.55rem 0.55rem 0; padding: 0.55rem 0.6rem 0.5rem; border: 1px dashed var(--kinder-border-2); border-radius: 8px; } .kinder-product-card__label::before, .kinder-product-card__label::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--kinder-surface-card); border: 1px dashed var(--kinder-border-2); transform: translateY(-50%); } .kinder-product-card__label::before { inset-inline-start: -7px; clip-path: inset(0 50% 0 0); } .kinder-product-card__label::after { inset-inline-end: -7px; clip-path: inset(0 0 0 50%); } html[dir="ltr"] .kinder-product-card__label::before { clip-path: inset(0 0 0 50%); } html[dir="ltr"] .kinder-product-card__label::after { clip-path: inset(0 50% 0 0); } .kinder-product-card__brand { display: flex; justify-content: space-between; gap: 0.4rem; font-family: var(--kinder-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--kinder-caramel); text-transform: uppercase; } .kinder-product-card__brand b { font-weight: 600; color: var(--kinder-text); } .kinder-product-card__title { font-family: var(--kinder-font-body); font-weight: 600; font-size: 0.97rem; line-height: 1.45; margin: 0.2rem 0 0; } .kinder-product-card__title a { color: var(--kinder-text); } .kinder-product-card__title a:hover { color: var(--kinder-accent); } .kinder-product-card__spec { font-family: var(--kinder-font-mono); font-size: 0.72rem; color: var(--kinder-text-muted); margin-top: 0.25rem; text-align: right; } html[dir="ltr"] .kinder-product-card__spec { text-align: left; } .kinder-product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.55rem 0.55rem; margin-top: auto; } .kinder-product-card__price { font-family: var(--kinder-font-mono); font-weight: 600; font-size: 1rem; color: var(--kinder-text); white-space: nowrap; margin: 0; padding: 0; } .kinder-product-card__price .woocommerce-Price-currencySymbol { font-family: var(--kinder-font-body); font-size: 0.85em; } .kinder-product-card__price del { display: block; color: var(--kinder-text-muted); font-weight: 400; font-size: 0.76rem; } .kinder-product-card__price ins { text-decoration: none; color: var(--kinder-accent); } .kinder-stepper { display: flex; align-items: center; border: 1.5px solid var(--kinder-text); border-radius: var(--kinder-radius-sm); overflow: hidden; flex: none; } .kinder-stepper__btn { width: 30px; height: 36px; border: 0; background: transparent; color: var(--kinder-text); cursor: pointer; font-weight: 600; font-size: 1rem; } .kinder-stepper__btn:hover { background: var(--kinder-surface-alt); } .kinder-stepper__val { min-width: 24px; text-align: center; font-family: var(--kinder-font-mono); font-size: 0.85rem; } .kinder-product-card a.kinder-product-card__atc, .woocommerce .kinder-product-card a.button.kinder-product-card__atc { display: grid; place-items: center; width: auto; min-height: 36px; height: 36px; margin: 0; padding: 0 0.6rem; border: 0; border-radius: 0; background: var(--kinder-text); color: var(--kinder-bg); font-size: 0; } .kinder-product-card a.kinder-product-card__atc svg { width: 17px; height: 17px; } .kinder-product-card a.kinder-product-card__atc:hover, .woocommerce .kinder-product-card a.button.kinder-product-card__atc:hover { background: var(--kinder-accent); color: #fff; } .kinder-product-card a.kinder-product-card__atc.added::after, .kinder-product-card a.kinder-product-card__atc.loading::after { display: none; } .kinder-product-card .added_to_cart { display: none !important; } .kinder-product-card__more { font-size: 0.84rem; font-weight: 600; color: var(--kinder-text); border-bottom: 1px solid var(--kinder-border-2); } .kinder-product-card__quote { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0 0.55rem 0.6rem; padding: 0.35rem; border-radius: 6px; border: 1px solid var(--kinder-border); background: var(--kinder-bg); color: var(--kinder-text); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .kinder-product-card__quote svg { width: 15px; height: 15px; } .kinder-product-card__quote:hover { border-color: var(--kinder-text); } [data-kinder-quote-add].is-in-quote { background: var(--kinder-accent-soft); border-color: var(--kinder-accent); color: var(--kinder-accent); } .kinder-product-card.is-out .kinder-product-card__media img { filter: grayscale(0.6); opacity: 0.75; } .kinder-card-variants { margin-top: 0.3rem; } @media (max-width: 560px) { .kinder-product-card__foot { flex-direction: column; align-items: stretch; gap: 0.4rem; } .kinder-stepper { justify-content: space-between; } .kinder-product-card a.kinder-product-card__atc { flex: 1; } .kinder-product-card__title { font-size: 0.88rem; } .kinder-product-card__brand > span:last-child { display: none; } } /* List view (shop): the same card becomes an order row */ .kinder-view-list .kinder-wc-content ul.products { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--kinder-text); } .kinder-view-list .kinder-wc-content ul.products .kinder-product-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 0.9rem; border: 0; border-bottom: 1px solid var(--kinder-border); border-radius: 0; padding: 0.55rem 0.3rem; box-shadow: none; background: transparent; } .kinder-view-list .kinder-wc-content ul.products .kinder-product-card:hover { background: var(--kinder-surface-card); } .kinder-view-list .kinder-wc-content .kinder-product-card__media { margin: 0; width: 76px; height: 60px; aspect-ratio: auto; } .kinder-view-list .kinder-wc-content .kinder-product-card__badges, .kinder-view-list .kinder-wc-content .kinder-product-card__actions { display: none; } .kinder-view-list .kinder-wc-content .kinder-product-card__label { margin: 0; padding: 0; border: 0; } .kinder-view-list .kinder-wc-content .kinder-product-card__label::before, .kinder-view-list .kinder-wc-content .kinder-product-card__label::after { display: none; } .kinder-view-list .kinder-wc-content .kinder-product-card__foot { padding: 0; gap: 1rem; } .kinder-view-list .kinder-wc-content .kinder-product-card__quote { margin: 0; white-space: nowrap; } @media (max-width: 760px) { .kinder-view-list .kinder-wc-content ul.products .kinder-product-card { grid-template-columns: 60px minmax(0, 1fr) auto; } .kinder-view-list .kinder-wc-content .kinder-product-card__media { width: 60px; height: 52px; } .kinder-view-list .kinder-wc-content .kinder-product-card__quote { grid-column: 2 / -1; justify-self: start; } .kinder-view-list .kinder-wc-content .kinder-product-card__foot { flex-direction: column; align-items: flex-end; gap: 0.3rem; } } /* === 7. ORIGIN STAMPS === */ .kinder-origins__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap: 0.6rem; } .kinder-origin { display: grid; justify-items: center; gap: 0.4rem; padding: 1.1rem 0.6rem; text-align: center; border-radius: var(--kinder-radius-md); color: var(--kinder-text); transition: background 0.2s; } .kinder-origin:hover { background: var(--kinder-surface-card); color: var(--kinder-text); } .kinder-origin__stamp { width: 92px; height: 92px; border-radius: 50%; border: 2px solid var(--kinder-text); display: grid; place-items: center; position: relative; transform: rotate(var(--kinder-rot, -8deg)); transition: transform 0.4s; } .kinder-origin:hover .kinder-origin__stamp { transform: rotate(0); } .kinder-origin__stamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--kinder-text); } .kinder-origin__stamp b { font-family: var(--kinder-font-mono); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.06em; } .kinder-origin__name { font-weight: 600; font-size: 0.98rem; } .kinder-origin__cnt { font-family: var(--kinder-font-mono); font-size: 0.72rem; color: var(--kinder-text-muted); } /* === 8. WEEKLY DEAL TICKET === */ .kinder-flash-deal { background: transparent; color: var(--kinder-text); } .kinder-ticket { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); background: var(--kinder-surface-card); border: 1.5px solid var(--kinder-text); border-radius: 18px; overflow: hidden; } .kinder-ticket__img { position: relative; min-height: 300px; background: var(--kinder-kraft); } .kinder-ticket .kinder-ticket__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .kinder-ticket__body { position: relative; padding: clamp(1.3rem, 3vw, 2.2rem); border-inline-start: 2px dashed var(--kinder-text); } .kinder-ticket__body::before, .kinder-ticket__body::after { content: ""; position: absolute; inset-inline-start: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--kinder-bg); border: 1.5px solid var(--kinder-text); } .kinder-ticket__body::before { top: -13px; } .kinder-ticket__body::after { bottom: -13px; } .kinder-ticket__title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0.5rem 0 0; } .kinder-ticket__sub { color: var(--kinder-text-muted); margin: 0.5rem 0 0; } .kinder-ticket__price { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; margin-top: 0.9rem; font-family: var(--kinder-font-mono); font-size: 1.9rem; font-weight: 600; color: var(--kinder-accent); } .kinder-ticket__price del { color: var(--kinder-text-muted); font-size: 0.55em; font-weight: 400; } .kinder-ticket__price ins { text-decoration: none; } .kinder-ticket__price .woocommerce-Price-currencySymbol { font-family: var(--kinder-font-body); font-size: 0.7em; } .kinder-ticket__ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; } .kinder-ticket__barcode { display: block; height: 34px; margin-top: 1.2rem; max-width: 240px; opacity: 0.75; background: repeating-linear-gradient(90deg, var(--kinder-text) 0 2px, transparent 2px 4px, var(--kinder-text) 4px 5px, transparent 5px 9px, var(--kinder-text) 9px 12px, transparent 12px 14px); } .kinder-countdown { display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end; font-family: var(--kinder-font-mono); } .kinder-countdown__unit { min-width: 64px; padding: 0.55rem 0.3rem; border: 1px solid var(--kinder-border-2); border-radius: 8px; text-align: center; background: var(--kinder-bg); display: grid; gap: 0; } .kinder-countdown__num { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--kinder-text); font-family: var(--kinder-font-mono); } .kinder-countdown__label { font-size: 0.64rem; color: var(--kinder-text-muted); letter-spacing: 0.1em; } @media (max-width: 820px) { .kinder-ticket { grid-template-columns: minmax(0, 1fr); } .kinder-ticket__img { min-height: 220px; } .kinder-ticket__body { border-inline-start: 0; border-top: 2px dashed var(--kinder-text); } .kinder-ticket__body::before, .kinder-ticket__body::after { display: none; } .kinder-countdown { justify-content: center; } } /* === 9. WHOLESALE MANIFEST === */ .kinder-wholesale { background: transparent; } .kinder-manifest { background: #3A1C11; color: #F7EBDD; border-radius: 18px; padding: clamp(1.3rem, 3vw, 2.4rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 4vw, 3rem); } .kinder-manifest .kinder-label { color: #D9A877; } .kinder-manifest .kinder-label b { color: #fff; } .kinder-manifest .kinder-sec-title { color: #fff; } .kinder-manifest__text p { color: #D9C2B2; margin-top: 0.7rem; } .kinder-steps3 { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.8rem; counter-reset: kinder-s3; } .kinder-steps3 li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 0.8rem; counter-increment: kinder-s3; } .kinder-steps3 li::before { content: "0" counter(kinder-s3); grid-row: span 2; font-family: var(--kinder-font-mono); font-weight: 600; color: #D9A877; padding-top: 0.1rem; } .kinder-steps3 b { color: #fff; } .kinder-steps3 span { font-size: 0.9rem; color: #D9C2B2; } .kinder-po { background: #FFFDFA; color: #3A1C11; border-radius: 12px; padding: 1rem; font-size: 0.9rem; align-self: start; } .kinder-po__head { display: flex; justify-content: space-between; font-family: var(--kinder-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: #86644F; padding-bottom: 0.6rem; border-bottom: 1px dashed #D6BCA2; } .kinder-po table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0; } .kinder-po th, .kinder-po td { padding: 0.5rem 0.2rem; border-bottom: 1px solid #EFE1D3; text-align: start; color: #3A1C11; background: transparent; } .kinder-po th { font-family: var(--kinder-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: #86644F; font-weight: 500; } .kinder-po .kinder-mono { white-space: nowrap; } .kinder-po__tot { display: flex; justify-content: space-between; gap: 1rem; margin: 0.7rem 0 0.9rem; font-weight: 700; } @media (max-width: 900px) { .kinder-manifest { grid-template-columns: minmax(0, 1fr); } } /* === 10. SOURCING ROUTE === */ .kinder-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; position: relative; } .kinder-route::before { content: ""; position: absolute; top: 27px; inset-inline: 6%; border-top: 2px dashed var(--kinder-border-2); } .kinder-route__stop { position: relative; padding-top: 4.2rem; } .kinder-route__pin { position: absolute; top: 0; inset-inline-start: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--kinder-bg); border: 2px solid var(--kinder-text); display: grid; place-items: center; } .kinder-route__pin svg { width: 24px; height: 24px; } .kinder-route__k { font-family: var(--kinder-font-mono); font-size: 0.72rem; color: var(--kinder-caramel); letter-spacing: 0.12em; } .kinder-route__stop h3 { font-size: 1.15rem; margin: 0.2rem 0 0; } .kinder-route__stop p { font-size: 0.9rem; color: var(--kinder-text-muted); margin: 0.3rem 0 0; } @media (max-width: 860px) { .kinder-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kinder-route::before { display: none; } } @media (max-width: 460px) { .kinder-route { grid-template-columns: minmax(0, 1fr); } } /* === 11. BRANDS === */ .kinder-brands__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0.8rem; border: 0; } .kinder-brands__list li { padding: 1.1rem; border: 1px dashed var(--kinder-border-2); border-radius: var(--kinder-radius-md); text-align: center; background: var(--kinder-bg); } .kinder-brands__list a { display: block; color: inherit; } .kinder-brands__list b { display: block; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--kinder-text); } .kinder-brands__list span { font-size: 0.8rem; color: var(--kinder-text-muted); } /* === 12. RECIPES (blog cards) === */ .kinder-blog-grid { background: transparent; } .kinder-blog-grid__posts, .kinder-posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .kinder-blog-card { display: flex; flex-direction: column; border: 0; border-top: 2px solid var(--kinder-text); border-radius: 0; background: transparent; padding-top: 0.9rem; box-shadow: none; overflow: visible; } .kinder-blog-card:hover { transform: none; box-shadow: none; } .kinder-blog-card__thumb-link { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--kinder-kraft); } .kinder-blog-card .kinder-blog-card__thumb { width: 100%; height: 100%; max-width: none; object-fit: cover; } .kinder-blog-card__body { padding: 0.8rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; } .kinder-blog-card__meta { font-family: var(--kinder-font-mono); font-size: 0.72rem; color: var(--kinder-text-muted); letter-spacing: 0.06em; display: flex; gap: 0.7rem; flex-wrap: wrap; } .kinder-blog-card__meta a { color: var(--kinder-caramel); } .kinder-blog-card__title { font-family: var(--kinder-font-body); font-weight: 700; font-size: 1.08rem; line-height: 1.5; margin: 0; } .kinder-blog-card__title a { color: var(--kinder-text); } .kinder-blog-card__title a:hover { color: var(--kinder-accent); } .kinder-blog-card__excerpt { color: var(--kinder-text-muted); font-size: 0.9rem; margin: 0; } .kinder-blog-card__read-more { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 600; color: var(--kinder-text); border-bottom: 1px solid var(--kinder-border-2); width: fit-content; } .kinder-blog-card__read-more svg { width: 16px; height: 16px; } .kinder-blog-grid__footer { text-align: center; margin-top: 2rem; } @media (max-width: 860px) { .kinder-blog-grid__posts, .kinder-posts-grid { grid-template-columns: minmax(0, 1fr); } } /* === 13. FAQ === */ .kinder-faq { background: transparent; } .kinder-faq__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 2.5rem; } .kinder-faq__intro p { color: var(--kinder-text-muted); margin-top: 0.6rem; } .kinder-faq__intro .kinder-btn { margin-top: 0.8rem; } .kinder-faq__list { border-top: 2px solid var(--kinder-text); } .kinder-faq__item { border-bottom: 1px solid var(--kinder-border); background: transparent; border-radius: 0; box-shadow: none; } .kinder-faq__heading { margin: 0; } .kinder-faq__question { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 0.6rem; align-items: center; padding: 1rem 0; background: none; border: 0; font: inherit; font-weight: 600; text-align: start; color: var(--kinder-text); cursor: pointer; } .kinder-faq__no { font-style: normal; font-family: var(--kinder-font-mono); color: var(--kinder-caramel); font-size: 0.8rem; } .kinder-faq__icon { color: var(--kinder-accent); display: grid; transition: transform 0.25s; } .kinder-faq__icon svg { width: 20px; height: 20px; } .kinder-faq__question[aria-expanded="true"] .kinder-faq__icon { transform: rotate(45deg); } .kinder-faq__answer p { color: var(--kinder-text-muted); margin: 0; padding: 0 0 1rem; padding-inline-start: 50px; } @media (max-width: 820px) { .kinder-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .kinder-faq__answer p { padding-inline-start: 0; } } /* === 14. FOOTER === */ .kinder-site-footer, .kinder-footer { background: var(--kinder-surface-alt); color: var(--kinder-text); } .kinder-footer { border-top: 2px solid var(--kinder-text); padding-top: 3rem; } .kinder-footer__wordmark { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; font-family: var(--kinder-font-heading); font-weight: 600; font-size: clamp(3rem, 11vw, 8.5rem); line-height: 0.95; color: var(--kinder-text); padding-bottom: 1.5rem; border-bottom: 1px solid var(--kinder-border-2); } .kinder-footer__wordmark small { font-family: var(--kinder-font-mono); font-size: 0.85rem; letter-spacing: 0.1em; font-weight: 500; opacity: 0.8; } .kinder-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 2rem; border-bottom: 0; } .kinder-footer__col-title { font-family: var(--kinder-font-mono); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--kinder-caramel); margin: 0 0 0.8rem; text-transform: uppercase; font-weight: 600; } .kinder-footer__list { gap: 0.45rem; } .kinder-footer__list-link { color: var(--kinder-text); font-size: 0.92rem; } .kinder-footer__list-link:hover { color: var(--kinder-accent); padding: 0; } .kinder-footer__address { display: grid; gap: 0.6rem; color: var(--kinder-text); font-style: normal; } .kinder-footer__contact-line { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.55; color: var(--kinder-text); } .kinder-footer__address a.kinder-footer__contact-line { color: var(--kinder-text); } .kinder-footer__address a.kinder-footer__contact-line:hover { color: var(--kinder-accent); } .kinder-footer__contact-line svg { width: 17px; height: 17px; margin-top: 0.2rem; flex: none; color: var(--kinder-caramel); } .kinder-footer__pay { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .kinder-footer__pay li { font-size: 0.76rem; font-weight: 600; border: 1px solid var(--kinder-text); border-radius: 4px; padding: 0.15rem 0.5rem; } .kinder-footer__tagline, .kinder-footer__note { color: var(--kinder-text-muted); font-size: 0.86rem; margin: 0.8rem 0 0; } .kinder-socials { display: flex; gap: 0.4rem; margin-top: 1rem; } .kinder-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kinder-text); display: grid; place-items: center; color: var(--kinder-text); } .kinder-socials a:hover { background: var(--kinder-text); color: var(--kinder-bg); } .kinder-socials svg { width: 17px; height: 17px; } .kinder-footer__bottom { background: #3A1C11; color: #E5CDB6; padding: 0.8rem 0; } .kinder-footer__bottom-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; } .kinder-footer__copy, .kinder-footer__legal, .kinder-footer__bottom a { color: #E5CDB6; margin: 0; font-size: 0.82rem; } .kinder-footer__code { font-family: var(--kinder-font-mono); font-size: 0.78rem; } @media (max-width: 860px) { .kinder-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .kinder-footer__grid { grid-template-columns: minmax(0, 1fr); } } /* Floating actions: WhatsApp at the inline-start corner, quote button above it */ .kinder-float-wa { background: var(--kinder-wa); inset-inline-end: auto; inset-inline-start: calc(1rem + env(safe-area-inset-left, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; } .kinder-float-wa__tooltip { background: var(--kinder-text); color: var(--kinder-bg); inset-inline-end: auto; inset-inline-start: calc(100% + 0.75rem); } .kinder-back-to-top { inset-inline-start: auto; inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); border-color: var(--kinder-border-2); background: var(--kinder-surface-card); } .kinder-back-to-top:hover { background: var(--kinder-text); color: var(--kinder-bg); border-color: var(--kinder-text); } /* === 15. QUOTE LIST DRAWER === */ .kinder-quote-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 92vw); z-index: calc(var(--kinder-z-drawer) + 2); background: var(--kinder-bg); display: flex; flex-direction: column; box-shadow: 0 0 60px rgba(0, 0, 0, 0.25); transform: translateX(-105%); visibility: hidden; transition: transform 0.4s var(--kinder-ease-out), visibility 0s linear 0.4s; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } html[dir="ltr"] .kinder-quote-drawer { transform: translateX(105%); } .kinder-quote-drawer.is-open, html[dir="ltr"] .kinder-quote-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; } .admin-bar .kinder-quote-drawer { top: 32px; } @media (max-width: 782px) { .admin-bar .kinder-quote-drawer { top: 46px; } } .kinder-quote-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 2px solid var(--kinder-text); } .kinder-quote-drawer__head h2 { font-size: 1.25rem; margin: 0; } .kinder-quote-drawer__head .kinder-mono { font-size: 0.7rem; color: var(--kinder-text-muted); } .kinder-quote-drawer__close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kinder-border-2); background: none; color: var(--kinder-text); display: grid; place-items: center; cursor: pointer; } .kinder-quote-drawer__close svg { width: 18px; height: 18px; } .kinder-quote-drawer__body { flex: 1; overflow: auto; padding: 0.6rem 1.2rem; } .kinder-quote-drawer__empty { color: var(--kinder-text-muted); padding-block: 1rem; } .kinder-qrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px dashed var(--kinder-border-2); } .kinder-quote-drawer .kinder-qrow img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--kinder-kraft); } .kinder-qrow b { display: block; font-size: 0.88rem; line-height: 1.4; } .kinder-qrow b a { color: var(--kinder-text); } .kinder-qrow small { font-family: var(--kinder-font-mono); font-size: 0.7rem; color: var(--kinder-text-muted); } .kinder-qrow__side { display: grid; gap: 0.3rem; justify-items: end; } .kinder-qrow__rm { border: 0; background: none; color: var(--kinder-text-muted); font-size: 0.78rem; text-decoration: underline; cursor: pointer; padding: 0; } .kinder-qrow .kinder-stepper__btn { height: 32px; } .kinder-quote-drawer__foot { display: grid; gap: 0.45rem; padding: 1rem 1.2rem; border-top: 1px solid var(--kinder-border); } .kinder-quote-drawer__foot label { font-size: 0.82rem; font-weight: 600; } .kinder-quote-drawer__foot select { min-height: 44px; border: 1.5px solid var(--kinder-border-2); border-radius: 8px; background: var(--kinder-surface-card); padding-inline: 0.6rem; color: var(--kinder-text); } .kinder-quote-drawer__foot .kinder-btn { margin-top: 0.4rem; } .kinder-quote-drawer__clear { background: none; border: 0; color: var(--kinder-text-muted); font-size: 0.8rem; text-decoration: underline; cursor: pointer; justify-self: center; } .kinder-quote-scrim { position: fixed; inset: 0; z-index: calc(var(--kinder-z-drawer) + 1); background: rgba(27, 18, 13, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s; } .kinder-quote-scrim.is-on { opacity: 1; pointer-events: auto; } .kinder-quote-fab { position: fixed; z-index: var(--kinder-z-float); bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); inset-inline-start: calc(1rem + env(safe-area-inset-left, 0px)); display: inline-flex; align-items: center; gap: 0.5rem; background: var(--kinder-accent); color: #fff; border: 0; border-radius: 999px; padding: 0.55rem 1rem; font: inherit; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(190, 40, 69, 0.7); cursor: pointer; } .kinder-quote-fab svg { width: 19px; height: 19px; } .kinder-quote-fab span { font-family: var(--kinder-font-mono); background: #fff; color: var(--kinder-accent); border-radius: 999px; padding: 0 0.45rem; font-size: 0.8rem; } .kinder-quote-fab[hidden] { display: none; } @media (max-width: 760px) { .kinder-quote-fab { display: none; } } /* Mini-cart drawer */ .kinder-mini-cart { background: var(--kinder-bg); } .kinder-mini-cart__header { border-bottom: 2px solid var(--kinder-text); } .kinder-mini-cart__title { font-family: var(--kinder-font-heading); } .kinder-cart-item__price { font-family: var(--kinder-font-mono); } /* === 16. SHOP (catalogue) === */ .kinder-shop-head { padding-block: 1.8rem 1.2rem; } .kinder-shop-head .kinder-breadcrumbs { margin: 0; } .kinder-shop-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; } .kinder-shop-head__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0; } .kinder-shop-head__count { font-family: var(--kinder-font-mono); font-size: 0.85rem; color: var(--kinder-text-muted); } .kinder-shop-head__desc { color: var(--kinder-text-muted); max-width: 70ch; margin-top: 0.4rem; } .kinder-shop-head__desc p { margin: 0; } .kinder-wc-main--archive .woocommerce-products-header { display: none; } .kinder-wc-main--archive > .kinder-container { padding-bottom: 3.5rem; } .kinder-shop-toolbar { position: relative; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.6rem 0; background: var(--kinder-bg); border: 0; border-block: 1px solid var(--kinder-border); border-radius: 0; } .kinder-shop-toolbar .woocommerce-result-count { display: none; } .kinder-shop-toolbar .woocommerce-ordering select { min-height: 36px; padding: 0 2rem 0 0.7rem; border: 1px solid var(--kinder-border-2); border-radius: 8px; background-color: var(--kinder-surface-card); font-size: 0.86rem; } .kinder-filter-toggle { display: inline-flex; flex: none; min-height: 36px; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1.5px solid var(--kinder-text); background: var(--kinder-text); color: var(--kinder-bg); font-size: 0.86rem; } .kinder-filter-toggle svg { width: 16px; height: 16px; } .kinder-quick-filters { display: flex; gap: 0.4rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .kinder-qf { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; padding: 0.35rem 0.75rem; border: 1px solid var(--kinder-border-2); border-radius: 999px; background: var(--kinder-surface-card); font-size: 0.84rem; font-weight: 500; color: var(--kinder-text); } .kinder-qf svg { width: 15px; height: 15px; color: var(--kinder-caramel); } .kinder-qf:hover { border-color: var(--kinder-text); color: var(--kinder-text); } .kinder-qf.is-on { background: var(--kinder-text); border-color: var(--kinder-text); color: var(--kinder-bg); } .kinder-qf.is-on svg { color: inherit; } .kinder-view-toggle { display: flex; border: 1px solid var(--kinder-border-2); border-radius: 8px; overflow: hidden; flex: none; } .kinder-view-toggle button { border: 0; background: var(--kinder-surface-card); width: 38px; height: 36px; display: grid; place-items: center; color: var(--kinder-text); cursor: pointer; } .kinder-view-toggle button svg { width: 18px; height: 18px; } .kinder-view-toggle button[aria-pressed="true"] { background: var(--kinder-text); color: var(--kinder-bg); } .kinder-active-filter { background: var(--kinder-accent-soft); color: var(--kinder-accent); } .kinder-active-filter:hover { background: var(--kinder-accent); color: #fff; } .kinder-shop-filters__inner { background: var(--kinder-bg); } .kinder-filter-group__title { font-family: var(--kinder-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--kinder-caramel); text-transform: uppercase; } @media (max-width: 700px) { .kinder-shop-toolbar { flex-wrap: wrap; } .kinder-quick-filters { order: 3; flex-basis: 100%; } .kinder-shop-toolbar .woocommerce-ordering { margin-inline-start: auto; } } /* === 17. SINGLE PRODUCT (spec sheet) === */ .kinder-single-meta { font-family: var(--kinder-font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--kinder-ok); margin-bottom: 0.4rem; } .kinder-single-meta.is-out { color: var(--kinder-text-muted); } .woocommerce div.product .product_title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.3; margin: 0; } .kinder-single-brand { display: block; font-family: var(--kinder-font-mono); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--kinder-caramel); text-transform: uppercase; margin: 0.6rem 0 0; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--kinder-font-mono); font-size: 1.9rem; font-weight: 600; color: var(--kinder-text); margin-top: 0.8rem; } .woocommerce div.product p.price ins { color: var(--kinder-accent); text-decoration: none; } .woocommerce div.product p.price .woocommerce-Price-currencySymbol { font-family: var(--kinder-font-body); font-size: 0.75em; } .woocommerce div.product .woocommerce-product-gallery { position: relative; } .woocommerce div.product div.images .woocommerce-product-gallery__image img { border-radius: 14px; border: 1px solid var(--kinder-border); background: var(--kinder-kraft); } .woocommerce div.product div.images .flex-control-thumbs li img { border-radius: 8px; border: 1.5px solid var(--kinder-border); } .woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border-color: var(--kinder-text); } .kinder-sheet { margin: 1.3rem 0; border: 1.5px solid var(--kinder-text); border-radius: 12px; padding: 0.4rem 1rem; background: var(--kinder-surface-card); } .kinder-sheet__title { font-family: var(--kinder-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--kinder-caramel); padding: 0.5rem 0; margin: 0; border-bottom: 1px solid var(--kinder-border); font-weight: 600; text-align: right; } .kinder-sheet dl, dl.kinder-sheet { margin: 0; } .kinder-sheet__row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.93rem; } .kinder-sheet__row dt { color: var(--kinder-text-muted); white-space: nowrap; font-weight: 400; } .kinder-sheet__row i { flex: 1; min-width: 20px; border-bottom: 1.5px dotted var(--kinder-border-2); transform: translateY(-4px); } .kinder-sheet__row dd { margin: 0; font-weight: 600; text-align: end; } .woocommerce div.product form.cart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; margin-top: 1.2rem; } .woocommerce div.product form.cart .quantity .qty { min-height: 50px; border: 1.5px solid var(--kinder-text); border-radius: 8px; font-family: var(--kinder-font-mono); background: var(--kinder-surface-card); } .woocommerce div.product form.cart button.single_add_to_cart_button { min-height: 50px; border-radius: 8px; background: var(--kinder-btn-bg); border-color: var(--kinder-btn-bg); color: #fff; } .woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--kinder-accent-hover); border-color: var(--kinder-accent-hover); } .woocommerce div.product form.cart .kinder-whatsapp-order-btn { grid-column: 1 / -1; border-radius: 8px; min-height: 48px; background: var(--kinder-wa); color: #fff; } .kinder-single-quote { margin-top: 0.6rem; } .kinder-wholesale-note { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.8rem; padding: 0.8rem 1rem; background: var(--kinder-surface-alt); border: 0; border-radius: 10px; font-size: 0.9rem; } .kinder-wholesale-note > svg { width: 22px; height: 22px; color: var(--kinder-caramel); flex: none; } .kinder-wholesale-note a { color: var(--kinder-accent); font-weight: 700; } .kinder-perks { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } .kinder-perks li { display: flex; gap: 0.45rem; align-items: center; font-size: 0.8rem; color: var(--kinder-text-muted); } .kinder-perks svg { width: 18px; height: 18px; color: var(--kinder-text); flex: none; } .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--kinder-border); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--kinder-text); border-color: var(--kinder-accent); } .kinder-sticky-buy { display: none; } @media (max-width: 900px) { .kinder-sticky-buy:not([hidden]) { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: calc(var(--kinder-z-float) + 1); background: var(--kinder-bg); border-top: 1.5px solid var(--kinder-text); padding: 0.6rem max(16px, env(safe-area-inset-left, 0px)); padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); gap: 0.6rem; align-items: center; justify-content: space-between; } .kinder-sticky-buy small { display: block; color: var(--kinder-text-muted); font-size: 0.78rem; } .single-product .kinder-float-wa, .single-product .kinder-quote-fab { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); } .single-product .kinder-quote-fab { bottom: calc(9.4rem + env(safe-area-inset-bottom, 0px)); } .kinder-perks { grid-template-columns: minmax(0, 1fr); } } /* === 18. PAGE HEADS (pages, blog, archives, search, cart, checkout) === */ .kinder-page-banner { background: transparent; color: var(--kinder-text); padding-block: 1.8rem 1.2rem; border-bottom: 1px solid var(--kinder-border); overflow: visible; } .kinder-page-banner__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0.4rem 0 0; color: var(--kinder-text); } .kinder-page-banner__desc { color: var(--kinder-text-muted); margin-top: 0.4rem; max-width: 70ch; } .kinder-page-banner .kinder-breadcrumbs, .kinder-page-banner .kinder-breadcrumbs a { color: var(--kinder-text-muted); } .kinder-page-body { padding-block: 2rem 3.5rem; } .kinder-breadcrumbs { font-size: 0.82rem; } /* === 19. CHECKOUT & THANK-YOU === */ .kinder-checkout-steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1.5px solid var(--kinder-text); border-radius: 12px; overflow: hidden; counter-reset: kinder-co; } .kinder-checkout-steps li { counter-increment: kinder-co; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 0.7rem; align-items: center; padding: 0.8rem 1rem; background: var(--kinder-surface-card); border-inline-start: 1px dashed var(--kinder-border-2); } .kinder-checkout-steps li:first-child { border-inline-start: 0; } .kinder-checkout-steps li::before { content: "0" counter(kinder-co); grid-row: span 2; font-family: var(--kinder-font-mono); font-weight: 600; color: var(--kinder-accent); } .kinder-checkout-steps strong { font-size: 0.93rem; } .kinder-checkout-steps span { font-size: 0.8rem; color: var(--kinder-text-muted); } @media (max-width: 760px) { .kinder-checkout-steps { grid-template-columns: minmax(0, 1fr); } .kinder-checkout-steps li { border-inline-start: 0; border-top: 1px dashed var(--kinder-border-2); } .kinder-checkout-steps li:first-child { border-top: 0; } } #customer_details { background: var(--kinder-surface-card); border-radius: 14px; } form.checkout.woocommerce-checkout > #order_review { background: var(--kinder-surface-card); border: 1.5px solid var(--kinder-text); border-radius: 14px; } form.checkout .form-row input.input-text, form.checkout .form-row textarea, form.checkout .form-row select, form.checkout .select2-container .select2-selection { min-height: 48px; border-radius: 8px; border: 1.5px solid var(--kinder-border-2); background: var(--kinder-bg); } form.checkout .form-row input.input-text:focus, form.checkout .form-row textarea:focus { border-color: var(--kinder-text); outline: none; } .woocommerce-checkout-review-order-table .amount, .woocommerce-checkout-review-order-table .product-quantity { font-family: var(--kinder-font-mono); } #payment .payment_box { background: var(--kinder-surface-alt); border-radius: 10px; color: var(--kinder-text); } #payment .payment_box::before { display: none; } .kinder-paym { border: 0; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0.5rem; } .kinder-paym legend { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; padding: 0; } .kinder-paym__option { display: flex; gap: 0.7rem; align-items: center; padding: 0.65rem 0.8rem; border-radius: 10px; border: 1.5px solid var(--kinder-border-2); background: var(--kinder-bg); cursor: pointer; min-width: 0; } .kinder-paym__option:has(input:checked) { border-color: var(--kinder-text); box-shadow: 3px 3px 0 var(--kinder-kraft); } .kinder-paym__option input { accent-color: var(--kinder-accent); margin: 0; flex: none; } .kinder-paym__icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--kinder-pay-color, var(--kinder-text)); color: #fff; flex: none; } .kinder-paym__icon svg { width: 19px; height: 19px; } .kinder-paym__text { min-width: 0; } .kinder-paym__text b { display: block; font-size: 0.9rem; } .kinder-paym__text small { color: var(--kinder-text-muted); font-size: 0.76rem; } .kinder-shipping-note td { color: var(--kinder-caramel); font-weight: 700; font-size: 0.86rem; font-family: var(--kinder-font-body) !important; } #place_order { background: var(--kinder-accent) !important; border-color: var(--kinder-accent) !important; color: #fff !important; border-radius: 8px !important; } #place_order:hover { background: var(--kinder-accent-hover) !important; } .woocommerce-order .woocommerce-thankyou-order-received, .woocommerce-order .woocommerce-notice--success { background: var(--kinder-surface-card); color: var(--kinder-text); border: 1.5px solid var(--kinder-text); } .woocommerce-order ul.woocommerce-order-overview li.order strong, .woocommerce-order ul.woocommerce-order-overview li.total strong { font-family: var(--kinder-font-mono); } .kinder-wa-handoff { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.4rem; margin-bottom: 1.5rem; border-radius: 14px; background: var(--kinder-surface-card); border: 2px dashed var(--kinder-wa); } .kinder-wa-handoff__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--kinder-wa); color: #fff; display: grid; place-items: center; } .kinder-wa-handoff__icon svg { width: 32px; height: 32px; } .kinder-wa-handoff h2 { font-size: 1.3rem; margin: 0; } .kinder-wa-handoff p { margin: 0.3rem 0 0; color: var(--kinder-text-muted); } .kinder-wa-handoff .kinder-wa-handoff__count { font-weight: 700; color: var(--kinder-ok); } .kinder-wa-handoff__cancel { background: none; border: 0; padding: 0; margin-inline-start: 0.4rem; color: var(--kinder-accent); font-weight: 700; text-decoration: underline; cursor: pointer; } @media (max-width: 760px) { .kinder-wa-handoff { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } } /* === 20. ABOUT (company profile) === */ .kinder-profile { padding-block: 2rem 3rem; } .kinder-profile__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .kinder-profile__text .kinder-label { margin-top: 1rem; } .kinder-profile__title { font-size: clamp(2.1rem, 4.8vw, 3.9rem); line-height: 1.15; margin: 0.8rem 0 0; } .kinder-profile__lead { color: var(--kinder-text); font-size: 1.05rem; margin-top: 1.2rem; max-width: 60ch; } .kinder-profile__lead p { margin: 0 0 0.8rem; } .kinder-sheet--facts { margin-top: 1.4rem; } .kinder-profile__photo { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 4.6; border: 1.5px solid var(--kinder-text); background: var(--kinder-kraft); } .kinder-profile .kinder-profile__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; } .kinder-routemap { background: var(--kinder-surface-card); border: 1px solid var(--kinder-border); border-radius: 16px; padding: clamp(1rem, 3vw, 2rem); overflow-x: auto; } .kinder-routemap svg { width: 100%; min-width: 560px; height: auto; display: block; } .kinder-routemap__in { fill: none; stroke: var(--kinder-caramel); stroke-width: 1.6; stroke-dasharray: 5 5; } .kinder-routemap__out { fill: none; stroke: var(--kinder-text); stroke-width: 1.4; } .kinder-routemap__dot { fill: var(--kinder-bg); stroke: var(--kinder-text); stroke-width: 1.6; } .kinder-routemap__end { fill: var(--kinder-text); } .kinder-routemap__code { font-family: var(--kinder-font-mono); font-size: 13px; font-weight: 600; fill: var(--kinder-text); } .kinder-routemap__big { font-size: 22px; } .kinder-routemap__hub { fill: var(--kinder-accent); } .kinder-routemap__hub-t { font-family: var(--kinder-font-mono); font-size: 13px; font-weight: 600; fill: #fff; } .kinder-routemap__hub-s { font-family: var(--kinder-font-body); font-size: 11px; fill: #fff; } .kinder-routemap__dark { fill: var(--kinder-text-muted); font-family: var(--kinder-font-mono); } .kinder-table-wrap { overflow-x: auto; } .kinder-manifest-t { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .kinder-manifest-t th { font-family: var(--kinder-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--kinder-text-muted); text-align: start; padding: 0.6rem 0.4rem; border-bottom: 2px solid var(--kinder-text); font-weight: 500; background: transparent; } .kinder-manifest-t td { padding: 1rem 0.4rem; border-bottom: 1px solid var(--kinder-border); vertical-align: top; background: transparent; } .kinder-manifest-t td b { font-family: var(--kinder-font-heading); font-weight: 600; font-size: 1.1rem; } .kinder-manifest-t__y { font-family: var(--kinder-font-mono); font-size: 1.4rem; font-weight: 600; color: var(--kinder-accent); white-space: nowrap; } .kinder-manifest-t__c { font-family: var(--kinder-font-mono); font-size: 0.8rem; color: var(--kinder-text-muted); white-space: nowrap; } .kinder-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .kinder-value { padding: 1.2rem; border: 1px dashed var(--kinder-border-2); border-radius: 12px; background: var(--kinder-bg); } .kinder-value svg { width: 26px; height: 26px; color: var(--kinder-accent); } .kinder-value h3 { font-size: 1.1rem; margin: 0.7rem 0 0; } .kinder-value p { font-size: 0.9rem; color: var(--kinder-text-muted); margin: 0.3rem 0 0; } .kinder-letter { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: center; } .kinder-letter > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1.5px solid var(--kinder-text); } .kinder-letter blockquote { margin: 0.8rem 0 0; font-family: var(--kinder-font-heading); font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.55; } .kinder-letter__sign { font-family: var(--kinder-font-mono); font-size: 0.8rem; color: var(--kinder-text-muted); margin-top: 1rem; text-align: right; } .kinder-letter__ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.4rem; } @media (max-width: 900px) { .kinder-profile__grid, .kinder-letter { grid-template-columns: minmax(0, 1fr); } .kinder-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .kinder-values { grid-template-columns: minmax(0, 1fr); } } /* === 21. CONTACT (ticket) === */ .kinder-ct { padding-block: 2rem 3.4rem; } .kinder-ct__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; } .kinder-ct__info .kinder-label { margin-top: 1rem; } .kinder-ct__title { font-size: clamp(1.9rem, 4.2vw, 3.2rem); margin: 0.8rem 0 0; } .kinder-ct__lead { color: var(--kinder-text-muted); margin-top: 0.8rem; max-width: 52ch; } .kinder-dticket { position: relative; margin-top: 1.6rem; background: var(--kinder-surface-card); border: 1.5px solid var(--kinder-text); border-radius: 16px; } .kinder-dticket__top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 2px dashed var(--kinder-text); font-family: var(--kinder-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; } .kinder-dticket .kinder-dticket__top img { width: 40px; height: 40px; border-radius: 50%; } .kinder-dticket::before, .kinder-dticket::after { content: ""; position: absolute; top: 60px; width: 22px; height: 22px; border-radius: 50%; background: var(--kinder-bg); border: 1.5px solid var(--kinder-text); } .kinder-dticket::before { inset-inline-start: -12px; } .kinder-dticket::after { inset-inline-end: -12px; } .kinder-dticket__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--kinder-border); } .kinder-dticket__row:last-child { border-bottom: 0; } .kinder-dticket__row > svg { width: 22px; height: 22px; color: var(--kinder-caramel); } .kinder-dticket__row small { display: block; font-family: var(--kinder-font-mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--kinder-text-muted); text-align: start; } .kinder-dticket__row b { font-weight: 600; overflow-wrap: anywhere; } .kinder-dticket__go { font-size: 0.8rem; font-weight: 600; color: var(--kinder-text); border-bottom: 1px solid var(--kinder-border-2); white-space: nowrap; } .kinder-dticket__go:hover { color: var(--kinder-accent); border-color: var(--kinder-accent); } .kinder-chan { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--kinder-border); border-radius: 12px; background: var(--kinder-surface-card); margin-bottom: 0.7rem; color: var(--kinder-text); } .kinder-chan:hover { border-color: var(--kinder-text); color: var(--kinder-text); } .kinder-chan__ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: #fff; } .kinder-chan__ic svg { width: 26px; height: 26px; } .kinder-chan__ic--wa { background: var(--kinder-wa); } .kinder-chan__ic--ink { background: #3A1C11; } .kinder-chan__ic--red { background: var(--kinder-accent); } .kinder-chan strong { display: block; font-family: var(--kinder-font-heading); font-weight: 600; font-size: 1.05rem; } .kinder-chan span span { font-size: 0.86rem; color: var(--kinder-text-muted); } .kinder-chan__go { font-size: 0.84rem; font-weight: 600; border: 1px solid var(--kinder-text); border-radius: 8px; padding: 0.35rem 0.7rem; } .kinder-box { background: var(--kinder-surface-card); border: 1px solid var(--kinder-border); border-radius: 14px; padding: clamp(1rem, 2.6vw, 1.6rem); } .kinder-box h2 { font-size: 1.25rem; margin: 0 0 1rem; } .kinder-ct__form { margin-top: 1rem; } .kinder-topics { border: 0; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .kinder-topic { position: relative; } .kinder-topic input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .kinder-topic span { display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--kinder-border-2); border-radius: 999px; font-size: 0.84rem; background: var(--kinder-bg); } .kinder-topic input:checked + span { background: var(--kinder-text); color: var(--kinder-bg); border-color: var(--kinder-text); } .kinder-topic input:focus-visible + span { outline: 2px solid var(--kinder-accent); outline-offset: 2px; } .kinder-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .kinder-fld { margin: 0; } .kinder-fld--full { grid-column: 1 / -1; } .kinder-fld label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 0.3rem; } .kinder-fld input, .kinder-fld textarea { width: 100%; min-height: 48px; border: 1.5px solid var(--kinder-border-2); border-radius: 8px; background: var(--kinder-bg); padding: 0.6rem 0.8rem; color: var(--kinder-text); font: inherit; } .kinder-fld textarea { min-height: 100px; resize: vertical; } .kinder-fld input:focus, .kinder-fld textarea:focus { outline: none; border-color: var(--kinder-text); } .kinder-ct__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; } .kinder-ct__note { font-size: 0.8rem; color: var(--kinder-text-muted); margin-top: 0.8rem; } .kinder-notice { padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-weight: 600; } .kinder-notice--success { background: color-mix(in srgb, var(--kinder-ok) 14%, transparent); color: var(--kinder-ok); } .kinder-notice--error { background: var(--kinder-accent-soft); color: var(--kinder-accent); } .kinder-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .kinder-contact .kinder-faq { border-top: 1px solid var(--kinder-border); } @media (max-width: 900px) { .kinder-ct__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .kinder-fields { grid-template-columns: minmax(0, 1fr); } .kinder-chan { grid-template-columns: 44px minmax(0, 1fr); } .kinder-chan__go { display: none; } .kinder-chan__ic { width: 44px; height: 44px; } } /* === 22. 404 & SEARCH === */ .kinder-404__badge { font-family: var(--kinder-font-mono); color: transparent; -webkit-text-stroke: 1.5px var(--kinder-text); } @media (prefers-reduced-motion: reduce) { .kinder-lbl, .kinder-origin__stamp, .kinder-product-card, .kinder-quote-drawer { transition: none !important; } } /* === 23. LEGACY HOMEPAGE SECTIONS (kept for layouts saved before v2: who we serve, story, numbers) === */ .kinder-audience__grid { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--kinder-text); } .kinder-audience__grid > li { border-bottom: 1px solid var(--kinder-border); } .kinder-audience__item { display: grid; grid-template-columns: 2.4rem 44px minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.95rem 0.4rem; color: var(--kinder-text); transition: background 0.2s; } .kinder-audience__item:hover { background: var(--kinder-surface-card); color: var(--kinder-text); } .kinder-audience__no { font-family: var(--kinder-font-mono); font-size: 0.8rem; color: var(--kinder-text-muted); } .kinder-audience__icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--kinder-kraft); color: var(--kinder-text); } .kinder-audience__icon svg { width: 22px; height: 22px; } .kinder-audience__item strong { font-family: var(--kinder-font-heading); font-size: 1.08rem; font-weight: 600; } .kinder-audience__need { color: var(--kinder-text-muted); font-size: 0.92rem; } .kinder-audience__go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--kinder-border-2); display: grid; place-items: center; transition: background 0.2s, color 0.2s; } .kinder-audience__item:hover .kinder-audience__go { background: var(--kinder-text); color: var(--kinder-bg); border-color: var(--kinder-text); } @media (max-width: 700px) { .kinder-audience__item { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 0.15rem; column-gap: 0.8rem; } .kinder-audience__no { display: none; } .kinder-audience__icon { grid-row: span 2; } .kinder-audience__item strong { grid-column: 2; } .kinder-audience__need { grid-column: 2; grid-row: 2; font-size: 0.85rem; } .kinder-audience__go { grid-column: 3; grid-row: 1 / span 2; } } .kinder-story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; } .kinder-story__photo { position: relative; margin: 0; padding: 0.7rem; background: var(--kinder-surface-card); border: 1px solid var(--kinder-border); border-radius: 14px; box-shadow: 0 18px 40px -26px rgba(42, 20, 12, 0.45); transform: rotate(-1.5deg); } .kinder-story .kinder-story__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 520px; object-fit: cover; border-radius: 8px; } .kinder-story__accent { color: var(--kinder-accent); } .kinder-story__lead { color: var(--kinder-text-muted); line-height: 1.9; margin: 0.9rem 0 0; max-width: 62ch; } .kinder-story__facts { margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; border-top: 2px solid var(--kinder-text); } .kinder-story__facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px dotted var(--kinder-border-2); } .kinder-story__facts dd { margin: 0; font-size: 0.92rem; color: var(--kinder-text-muted); } .kinder-story__facts dt { font-family: var(--kinder-font-mono); font-size: 1.25rem; font-weight: 600; color: var(--kinder-text); } .kinder-story__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; } @media (max-width: 860px) { .kinder-story__grid { grid-template-columns: minmax(0, 1fr); } .kinder-story__photo { max-width: 420px; transform: none; } .kinder-story .kinder-story__photo img { aspect-ratio: 4 / 3; } } @media (max-width: 480px) { .kinder-story__facts { grid-template-columns: minmax(0, 1fr); } } .kinder-stats.kinder-sec { padding-block: 0; border-top: 0; } .kinder-stats__grid { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 2px solid var(--kinder-text); } .kinder-stats__item { padding: 1.3rem 1rem; border-inline-start: 1px solid var(--kinder-border); text-align: start; } .kinder-stats__item:first-child { border-inline-start: 0; } .kinder-stats .kinder-stats__value { font-family: var(--kinder-font-mono); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; line-height: 1.15; color: var(--kinder-text); text-align: start; } .kinder-stats .kinder-stats__label { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--kinder-text-muted); } @media (max-width: 700px) { .kinder-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kinder-stats__item:nth-child(3) { border-inline-start: 0; } .kinder-stats__item:nth-child(n+3) { border-top: 1px solid var(--kinder-border); } } /* === 24. REVIEW STARS (WooCommerce's star font is not loaded: draw the stars with ★) === */ #review_form .comment-form-rating p.stars { margin: 0.3rem 0 0; line-height: 1; } #review_form .comment-form-rating p.stars span { display: inline-flex; gap: 0.2rem; } #review_form .comment-form-rating p.stars a { position: relative; display: inline-block; width: 1.9rem; height: 1.9rem; font-size: 0; color: transparent; text-decoration: none; overflow: hidden; } #review_form .comment-form-rating p.stars a::before { content: "\2605"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; color: var(--kinder-border-2); transition: color 0.15s; } #review_form .comment-form-rating p.stars:hover a::before, #review_form .comment-form-rating p.stars.selected a::before { color: #E0A526; } #review_form .comment-form-rating p.stars:hover a:hover ~ a::before, #review_form .comment-form-rating p.stars.selected a.active ~ a::before { color: var(--kinder-border-2); } #review_form .comment-form-rating p.stars:hover a:hover::before { color: #E0A526; } #review_form .comment-form-rating p.stars a:focus-visible { outline: 2px solid var(--kinder-accent); outline-offset: 2px; border-radius: 4px; } .woocommerce .star-rating { position: relative; display: inline-block; overflow: hidden; width: 5.4em; height: 1.1em; line-height: 1.1; font-size: 0.95rem; letter-spacing: 0.08em; color: transparent; } .woocommerce .star-rating::before { content: "\2605\2605\2605\2605\2605"; position: absolute; inset-block-start: 0; inset-inline-start: 0; color: var(--kinder-border-2); } .woocommerce .star-rating span { position: absolute; inset-block-start: 0; inset-inline-start: 0; height: 100%; overflow: hidden; padding-top: 1.5em; } .woocommerce .star-rating span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; inset-block-start: 0; inset-inline-start: 0; color: #E0A526; } #review_form textarea { border-color: var(--kinder-border-2); }