/* ========================================================================== Scoby theme — layout and WooCommerce refinements that theme.json can't express. Breakpoint: 782px (matches WordPress columns stacking). ========================================================================== */ :root { --scoby-radius: 20px; --scoby-bleed-l: var(--wp--style--root--padding-left, 20px); --scoby-bleed-r: var(--wp--style--root--padding-right, 20px); } html { scroll-padding-top: 80px; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { height: auto; } /* ---------- Utilities / block styles ---------- */ .is-style-eyebrow { font-size: 12px !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin-bottom: 0; } .is-style-eyebrow a { color: inherit; text-decoration: none; } .is-style-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; } .is-style-card { background: var(--wp--preset--color--paper); border-radius: var(--scoby-radius); overflow: hidden; } .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid currentColor; padding: 14.5px 28px; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--ground); } .scoby-more-link a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } :where(a, button, input, summary):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* ---------- Header ---------- */ .scoby-site-header { position: sticky; top: 0; z-index: 100; } .admin-bar .scoby-site-header { top: var(--wp-admin--admin-bar--height, 32px); } @media (max-width: 600px) { .admin-bar .scoby-site-header { top: 0; } } .scoby-header__row { gap: 12px; min-height: 52px; } .scoby-brand { text-decoration: none; } .scoby-brand__mark { margin: 0; flex: none; } .scoby-brand__name, .scoby-wordmark { font-family: var(--wp--preset--font-family--mincho); font-weight: 700; font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; line-height: 1; } .scoby-brand__name a { text-decoration: none; color: var(--wp--preset--color--ink); } .scoby-nav .wp-block-navigation-item__content { text-decoration: none; padding: 10px 0; } .scoby-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); } .scoby-actions { flex: none; } .scoby-actions > p { margin: 0; } .scoby-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding: 0 12px; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; } .scoby-account a, .scoby-cart .wc-block-mini-cart__button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--ink); } .wc-block-mini-cart__badge { background: var(--wp--preset--color--accent) !important; color: #fff !important; border-color: var(--wp--preset--color--ground) !important; } /* Mobile overlay menu */ .scoby-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ground); padding: 24px var(--scoby-bleed-l); } .scoby-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--mincho); font-size: 24px; font-weight: 700; padding: 8px 0; } .scoby-nav .wp-block-navigation__responsive-container-open, .scoby-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } @media (max-width: 599px) { /* Hamburger | logo | actions */ .scoby-header__row { gap: 0; } .scoby-nav { order: -1; flex: 1 1 0; } .scoby-brand { flex: none; } .scoby-actions { flex: 1 1 0; justify-content: flex-end; } .scoby-brand__name { font-size: 19px; letter-spacing: 0.16em; } .scoby-brand__mark img { width: 28px !important; height: 28px !important; } .scoby-account { display: none; } .scoby-lang { border: 0; padding: 0; height: 44px; } } /* ---------- Hero ---------- */ .scoby-hero__img { margin: 0; } .scoby-hero__img img { width: 100%; height: 620px; object-fit: cover; display: block; } .scoby-hero h1 { margin-top: 12px; } @media (max-width: 781px) { .scoby-hero-wrap { padding-top: 0 !important; } .scoby-hero { flex-direction: column-reverse; } .scoby-hero__media { margin-left: calc(var(--scoby-bleed-l) * -1) !important; margin-right: calc(var(--scoby-bleed-r) * -1) !important; flex-basis: auto !important; width: calc(100% + var(--scoby-bleed-l) + var(--scoby-bleed-r)); } .scoby-hero__img img { height: min(440px, 110vw); border-radius: 0 !important; object-position: center 40%; } .scoby-hero__buttons { flex-direction: column; align-items: stretch; } .scoby-hero__buttons .wp-block-button { width: 100%; } .scoby-hero__buttons .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; } .scoby-hero__buttons .is-style-outline .wp-block-button__link { border: 0; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; padding-top: 10px; padding-bottom: 10px; } } /* ---------- Trust strip ---------- */ .scoby-trust__grid { gap: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .scoby-trust__item p { margin: 0; } .scoby-trust__label { font-family: var(--wp--preset--font-family--mincho); font-weight: 700; } .scoby-trust__en { letter-spacing: 0.12em; } @media (max-width: 781px) { .scoby-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .scoby-trust__item:nth-child(odd) { border-right: 1px solid var(--wp--preset--color--line); } .scoby-trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--wp--preset--color--line); } .scoby-trust__label { font-size: 16px !important; } } /* ---------- Product cards / collections ---------- */ .scoby-product-row .wc-block-product-template, .scoby-product-grid .wc-block-product-template { gap: 24px; } .scoby-card { overflow: hidden; height: 100%; padding: 0 !important; } .scoby-facts { padding: 0 !important; gap: 0 !important; } .scoby-facts__item + .scoby-facts__item { border-left: 1px solid #EEE8DB; } .scoby-facts p { margin: 0; } .scoby-card__image { margin: 0 !important; position: relative; } .scoby-card__image img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block; } .scoby-product-grid .scoby-card__image img { aspect-ratio: 1 / 1 !important; } .scoby-card__body { flex: 1; } .scoby-card__title { margin: 0; line-height: 1.4; } .scoby-card__title a { text-decoration: none; } .scoby-card__excerpt p { margin: 0; line-height: 1.65; } .scoby-card__excerpt .wp-block-post-excerpt__more-text { display: none; } .scoby-card__buy { margin-top: auto !important; width: 100%; } .scoby-card__price { font-weight: 700; margin: 0 !important; } .scoby-card__button { margin: 0 !important; } .scoby-card__button .wp-block-button__link, .scoby-card__button .add_to_cart_button { border-radius: 999px; padding: 12px 20px; min-height: 44px; box-sizing: border-box; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--ground); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .scoby-card__button .added_to_cart { display: block; font-size: 13px; margin-top: 6px; } /* Out-of-stock: outline button + "入荷待ち" badge */ li.outofstock .scoby-card__button .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid currentColor; } li.outofstock .scoby-card__image::before { content: "入荷待ち"; position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--wp--preset--color--ground); color: var(--wp--preset--color--ink); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; } html[lang^="en"] li.outofstock .scoby-card__image::before { content: "Sold out"; } @media (max-width: 781px) { /* Swipeable row on phones */ .scoby-product-row .wc-block-product-template { display: flex !important; flex-wrap: nowrap !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-left: calc(var(--scoby-bleed-l) * -1) !important; margin-right: calc(var(--scoby-bleed-r) * -1) !important; padding: 0 var(--scoby-bleed-r) 8px var(--scoby-bleed-l) !important; scroll-padding-left: var(--scoby-bleed-l); scrollbar-width: none; } .scoby-product-row .wc-block-product-template::-webkit-scrollbar { display: none; } .scoby-product-row .wc-block-product-template > li { flex: 0 0 78% !important; max-width: 78% !important; width: 78% !important; scroll-snap-align: start; margin: 0 !important; } .scoby-card__image img { aspect-ratio: 1 / 1 !important; } .scoby-product-grid .wc-block-product-template { grid-template-columns: 1fr !important; display: grid !important; } .scoby-product-grid .wc-block-product-template > li { width: 100% !important; max-width: 100% !important; } } /* ---------- Ingredients ---------- */ .scoby-ingredient__img { margin: 0; } .scoby-ingredient__text p, .scoby-ingredient__text h3 { margin: 0; text-align: center; } .scoby-ingredient__num { letter-spacing: 0.12em; } @media (max-width: 781px) { .scoby-center-desktop { text-align: left !important; } .scoby-ingredients__grid { grid-template-columns: 1fr !important; gap: 0 !important; } .scoby-ingredient { flex-direction: row !important; justify-content: flex-start !important; gap: 16px !important; padding: 14px 0; border-bottom: 1px solid #E7E1D3; } .scoby-ingredient:last-child { border-bottom: 0; } .scoby-ingredient__img img { width: 72px !important; height: 72px !important; } .scoby-ingredient__text { align-items: flex-start !important; } .scoby-ingredient__text p, .scoby-ingredient__text h3 { text-align: left; } } /* ---------- Brewery ---------- */ .scoby-brewery__bg { margin: 0 !important; } .scoby-brewery__bg img { width: 100%; height: 560px; object-fit: cover; display: block; } .scoby-brewery__card { position: relative; margin-top: -160px !important; } @media (max-width: 781px) { .scoby-brewery__bg img { height: 300px; } .scoby-brewery__card { margin-top: -56px !important; padding: 24px 20px !important; } .scoby-brewery__card .wp-block-buttons { flex-direction: column; align-items: stretch; } .scoby-brewery__card .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; } } /* ---------- Coming soon + newsletter ---------- */ .scoby-soon { border-top: 1px solid var(--wp--preset--color--line); margin-top: 12px; } .scoby-soon__row { border-bottom: 1px solid var(--wp--preset--color--line); padding: 16px 0; gap: 12px; } .scoby-soon__row p { margin: 0; } .scoby-soon__title { font-family: var(--wp--preset--font-family--mincho); font-weight: 700; font-size: clamp(17px, 2vw, 20px); } .scoby-newsletter h2 { margin: 0; line-height: 1.5; } .scoby-newsletter-form { display: flex; flex-direction: column; gap: 8px; } .scoby-newsletter-form label { font-size: 13px; color: var(--wp--preset--color--muted); } .scoby-newsletter-form__row { display: flex; flex-wrap: wrap; gap: 10px; } .scoby-newsletter-form input[type="email"] { flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 16px; font: inherit; font-size: 16px; } .scoby-newsletter-form button { height: 52px; padding: 0 28px; background: var(--wp--preset--color--accent); color: #fff; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; } .scoby-newsletter-form button:hover { background: #8E2135; } .scoby-newsletter-form__msg { margin: 4px 0 0; font-size: 14px; } .scoby-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 600px) { .scoby-newsletter-form button { width: 100%; } } /* ---------- Footer ---------- */ .scoby-footer .wp-block-columns { margin-bottom: 0; } .scoby-footer__mark { margin: 0; background: var(--wp--preset--color--ground); border-radius: 50%; padding: 6px; } .scoby-footer__mark img { width: 36px !important; height: 36px !important; } .scoby-footer p { margin-top: 0; margin-bottom: 0; } .scoby-footer__heading { font-family: var(--wp--preset--font-family--gothic); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 8px; color: var(--wp--preset--color--ground); } .scoby-footer__list { list-style: none; padding: 0; margin: 0; } .scoby-footer__list li { margin: 0; } .scoby-footer__list a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; } .scoby-footer__list a:hover { text-decoration: underline; } /* ---------- Single product ---------- */ .scoby-breadcrumbs, .woocommerce-breadcrumb { color: var(--wp--preset--color--muted); } .scoby-pdp__media .woocommerce-product-gallery__image img, .scoby-pdp__media .woocommerce-product-gallery img { border-radius: var(--scoby-radius); } .scoby-pdp__media .flex-control-thumbs { display: flex; gap: 8px; margin-top: 8px !important; } .scoby-pdp__media .flex-control-thumbs img { border-radius: 10px; } .scoby-pdp__cat a { text-decoration: none; } .scoby-pdp__info > .wp-block-post-title { margin-top: 4px; margin-bottom: 8px; } .scoby-pdp__price { margin-top: 8px; } .scoby-pdp__price .wc-block-components-product-price, .scoby-pdp__price .price { font-weight: 700; margin: 0; } .woocommerce-price-suffix, .wc-block-components-product-price__suffix { font-size: 0.5em; font-weight: 400; color: var(--wp--preset--color--muted); margin-left: 4px; } /* Flavor pills */ .scoby-flavor-pills .wc-block-product-template { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; } .scoby-flavor-pills .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; } .scoby-flavor-pill { margin: 0; font-family: var(--wp--preset--font-family--gothic) !important; font-size: 14px !important; letter-spacing: 0 !important; } .scoby-flavor-pill a { display: flex; align-items: center; min-height: 52px; padding: 8px 14px; box-sizing: border-box; border: 1px solid #C9C0AD; border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--wp--preset--color--ink); line-height: 1.4; } .scoby-flavor-pill a:hover { border-color: var(--wp--preset--color--ink); } .scoby-flavor-pill a[aria-current="page"] { border: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--paper); } li.outofstock .scoby-flavor-pill a::after { content: "入荷待ち"; margin-left: auto; padding-left: 8px; white-space: nowrap; flex: none; font-size: 11px; font-weight: 400; color: var(--wp--preset--color--muted); } html[lang^="en"] li.outofstock .scoby-flavor-pill a::after { content: "Sold out"; } /* Add to cart */ .scoby-atc { margin-top: 20px !important; } .scoby-atc form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; } .scoby-atc .quantity { display: inline-flex; align-items: center; } .scoby-atc .quantity input.qty { height: 52px; width: 72px; border: 1px solid #C9C0AD; border-radius: 999px; text-align: center; font: inherit; font-weight: 700; background: #fff; } .scoby-atc .single_add_to_cart_button { flex: 1 1 200px; min-height: 52px; border-radius: 999px !important; background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--ground) !important; font-weight: 700; font-size: 15px; border: 0; } .scoby-atc .stock { font-weight: 700; margin: 0 0 8px; } .scoby-atc .stock.out-of-stock { color: var(--wp--preset--color--accent); } @media (max-width: 781px) { .scoby-pdp { padding-top: 12px !important; } .scoby-pdp__media { margin-left: calc(var(--scoby-bleed-l) * -1) !important; margin-right: calc(var(--scoby-bleed-r) * -1) !important; width: calc(100% + var(--scoby-bleed-l) + var(--scoby-bleed-r)); flex-basis: auto !important; } .scoby-pdp__media .woocommerce-product-gallery__image img, .scoby-pdp__media .woocommerce-product-gallery img { border-radius: 0; } .scoby-pdp__media .flex-control-thumbs { padding: 0 var(--scoby-bleed-l) !important; } .scoby-pdp__info > .wp-block-post-title { font-size: 30px !important; } /* Sticky add-to-cart bar */ .scoby-has-sticky-cart { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } .scoby-has-sticky-cart .scoby-atc form.cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0 !important; background: var(--wp--preset--color--paper); border-top: 1px solid var(--wp--preset--color--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: nowrap; box-shadow: 0 -6px 20px rgba(20, 38, 28, 0.06); } .scoby-has-sticky-cart .scoby-atc .single_add_to_cart_button { flex: 1 1 auto; } } /* Accordion (core/details) */ .scoby-accordion .wp-block-details { margin: 0; } .scoby-accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; font-family: var(--wp--preset--font-family--mincho); font-weight: 700; font-size: 17px; } .scoby-accordion summary::-webkit-details-marker { display: none; } .scoby-accordion summary::after { content: "+"; font-family: var(--wp--preset--font-family--gothic); font-weight: 400; font-size: 20px; } .scoby-accordion details[open] > summary::after { content: "−"; } .scoby-accordion details > :not(summary) { margin-top: 0; padding-bottom: 16px; } .scoby-accordion__content p { margin: 0 0 1em; } .scoby-accordion__content p:last-child { margin-bottom: 0; } /* ---------- WooCommerce general ---------- */ .woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner { border-radius: 12px; } .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { border-radius: 999px !important; background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--ground) !important; font-weight: 700; } /* ---------- Form fields (checkout, My Account, coupon, WPForms, newsletter) ---------- One rule for every text-like field so they all show a visible resting outline. Why the selector is long: the host injects an inline