/* Shared storefront components. Colors are supplied by the Customizer. */
body { background: var(--to-surface) !important; }
.wp-site-blocks { background: var(--to-surface); }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
.to-container { width: calc(100% - 48px); max-width: 1200px; margin-inline: auto; }
.to-header { background: var(--to-header-bg); color: var(--to-header-text); }
.to-header-main { display: grid; grid-template-columns: 270px minmax(200px,1fr) auto; gap: 40px; align-items: center; padding-block: 22px; }
.to-brand { display: flex; align-items: center; min-width: 0; }
.to-logo { display: block; width: 270px; max-width: 100%; height: auto; }
.to-wordmark { font-size: 28px; font-weight: 800; }
.to-search { display: flex; height: 46px; border: 1px solid #D9DDE1; border-radius: 6px; background: #F7F8F9; overflow: hidden; }
.to-search input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 12px 16px; font-size: 14px; color: #202326; }
.to-search button { border: 0; background: transparent; width: 48px; flex-shrink: 0; color: inherit; display: grid; place-items: center; }
.to-header svg, .to-button svg { width: 20px; height: 20px; }
.to-header-actions { display: flex; gap: 20px; align-items: center; }
.to-header-actions a { display: flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; }
.to-header-actions a:last-of-type { width: 44px; height: 44px; justify-content: center; border: 1px solid #D9DDE1; border-radius: 6px; }
.to-nav-band { border-block: 1px solid #E4E6E8; }
.to-navigation { display: flex; align-items: center; gap: 36px; min-height: 54px; }
.to-navigation a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; }
.to-navigation a:hover, .to-header-actions a:hover { color: var(--to-blue); }
.to-primary-menu { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.to-primary-menu li { position: relative; }
.to-primary-menu .sub-menu { position: absolute; top: 100%; left: 0; display: none; min-width: 200px; background: var(--to-header-bg); padding: 16px; list-style: none; z-index: 20; box-shadow: 0 8px 24px #0002; }
.to-primary-menu li:hover > .sub-menu, .to-primary-menu li:focus-within > .sub-menu { display: block; }
.to-catalog-nav { display: flex; align-items: center; position: relative; align-self: stretch; border-right: 1px solid #E4E6E8; padding-right: 24px; }
.to-catalog-toggle { width: 40px; min-height: 44px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; }
#to-categories { position: absolute; top: 100%; left: 0; min-width: 270px; background: var(--to-header-bg); border: 1px solid #E4E6E8; box-shadow: 0 12px 24px #0002; padding: 10px; z-index: 30; border-radius: 0 0 6px 6px; }
[hidden] { display: none !important; }
.to-category-menu { list-style: none; padding: 0; margin: 0; }
#to-categories a { display: block; padding: 12px; border-radius: 4px; }
#to-categories a:hover { background: #F3F4F5; }
#to-categories .to-category-menu .to-category-menu { padding-left: 16px; }
.to-nav-quote { margin-left: auto; display: flex; align-items: center; gap: 12px; background: transparent; border: 0; color: var(--to-blue); font-weight: 600; font-size: 14px; padding: 12px 0; }
.to-mobile-menu { display: none; background: transparent; color: inherit; border: 0; width: 44px; height: 44px; }
.to-button, .to-contact-form input[type=submit], .to-quote-dialog input[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; min-height: 48px; border: 0; border-radius: 6px; background: var(--to-orange); color: #FFF; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.to-button:hover, .to-contact-form input[type=submit]:hover, .to-quote-dialog input[type=submit]:hover { filter: brightness(.9); }
:where(.to-header,.to-footer,.to-contact,.to-quote-dialog,.to-single-product) :focus-visible { outline: 3px solid #1984BE; outline-offset: 3px; }
.to-footer { background: var(--to-footer-bg); color: var(--to-footer-text); padding: 56px 0 24px; }
.to-footer-grid { display: grid; grid-template-columns: 1.25fr 1fr .7fr 1.2fr; gap: 40px; }
.to-footer h2 { font-family: inherit; font-size: 15px; font-weight: 600; margin: 0 0 20px; color: inherit; }
.to-footer p { font-size: 14px; line-height: 1.7; opacity: .8; margin: 20px 0; }
.to-footer a { color: inherit; text-decoration: none; font-size: 14px; overflow-wrap: anywhere; }
.to-footer a:hover { text-decoration: underline; }
.to-footer ul { list-style: none; padding: 0; margin: 0; }
.to-footer li { margin-bottom: 10px; }
.to-footer-brand { display: block; background: #FFF; padding: 12px; border-radius: 4px; max-width: 260px; }
.to-footer-brand .to-logo { width: 100%; }
.to-footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #FFFFFF26; margin-top: 48px; padding-top: 24px; font-size: 12px; opacity: .7; }
.to-footer-legal { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 36px; }
.to-footer-legal + .to-footer-bottom { margin-top: 24px; }
.to-legal { max-width: 800px; margin-inline: auto; padding: 48px 24px 64px; }
.to-legal > h1 { font-family: inherit; font-size: 40px; line-height: 1.15; margin: 0 0 24px; }
.to-legal .wp-block-post-content { font-size: 16px; line-height: 1.75; color: #34393F; }
.to-legal .wp-block-post-content h2 { font-family: inherit; font-size: 21px; line-height: 1.35; margin-top: 36px; }
.to-legal .wp-block-post-content a { overflow-wrap: anywhere; }
.to-legal .to-legal-date { color: #69717A; font-size: 13px; }
@media(max-width:700px) { .to-legal { padding: 32px 16px 48px; } .to-legal > h1 { font-size: 30px; } }
.to-contact { padding-block: 56px 80px; }
.to-contact-intro { border-bottom: 1px solid #D9DDE1; padding-bottom: 32px; margin-bottom: 40px; }
.to-eyebrow { font-size: 12px; color: var(--to-blue); font-weight: 600; text-transform: uppercase; margin: 0 0 12px; letter-spacing: 0; }
.to-contact h1 { font-size: 48px; line-height: 1.15; margin: 0 0 20px; }
.to-contact-intro > p:last-child { color: #5D636B; line-height: 1.6; font-size: 18px; margin: 0; }
.to-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.to-contact h2 { font-size: 24px; margin: 0 0 24px; line-height: 1.3; }
.to-contact-email { font-size: 21px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--to-blue); overflow-wrap: anywhere; }
.to-contact-email svg { width: 20px; flex-shrink: 0; }
.to-contact-details > p { color: #5D636B; font-size: 14px; margin: 16px 0 32px; }
.to-branch { display: flex; align-items: start; gap: 16px; padding: 24px 0; border-top: 1px solid #D9DDE1; }
.to-branch svg { width: 20px; height: 20px; margin-top: 3px; color: #5D636B; }
.to-branch h3 { font-family: inherit; font-size: 16px; margin: 0 0 8px; }
.to-branch a { color: #202326; text-decoration: none; font-size: 18px; }
.to-contact-form { background: #FFF; padding: 32px; border: 1px solid #E4E6E8; border-radius: 8px; }
.to-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.to-form-grid .to-full { grid-column: 1 / -1; }
.to-form-grid label { display: block; font-size: 13px; font-weight: 600; color: #34393F; }
.to-form-grid label > span { display: block; margin-top: 8px; }
.to-form-grid input, .to-form-grid textarea { box-sizing: border-box; width: 100%; max-width: 100%; border: 1px solid #CED3D8; background: #FFF; border-radius: 5px; font-size: 15px; line-height: 1.5; padding: 11px 12px; color: #202326; font-weight: 400; }
.to-form-grid textarea { min-height: 112px; resize: vertical; }
.to-form-grid p { margin: 0; }
.to-form-grid br { display: none; }
.to-form-note { color: #69717A; font-size: 12px; line-height: 1.5; margin: 16px 0; }
.to-form-submit { margin: 20px 0 0; }
.wpcf7-not-valid-tip { font-size: 12px; font-weight: 400; margin-top: 5px; }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 12px; font-size: 14px; border-radius: 4px; }
.to-modal-open { overflow: hidden; }
.to-quote-dialog { width: calc(100% - 32px); max-width: 580px; max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; border: 0; padding: 0; border-radius: 8px; background: #FFF; color: #202326; box-shadow: 0 24px 80px #0004; }
.to-quote-dialog::backdrop { background: #14181C99; }
.to-dialog-body { padding: 36px; }
.to-dialog-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 4px; background: #F3F4F5; color: #202326; }
.to-dialog-close svg { width: 20px; height: 20px; }
.to-quote-dialog h2 { font-size: 28px; margin: 0 32px 12px 0; line-height: 1.2; }
.to-dialog-context { color: #5D636B; font-size: 14px; margin: 0 0 24px; }
.to-single-product { padding: 32px 24px 64px !important; }
.to-single-product > .woocommerce { max-width: 1200px !important; margin-inline: auto; }
.to-single-product .woocommerce-breadcrumb { margin-bottom: 32px; font-size: 12px; color: #69717A; }
.to-single-product .woocommerce-breadcrumb a { color: inherit; }
.to-single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.to-single-product div.product::before, .to-single-product div.product::after { display: none; }
.to-single-product .woocommerce-product-gallery, .to-single-product .summary { width: auto !important; float: none !important; margin: 0 !important; }
.to-single-product .woocommerce-product-gallery { background: #FFF; border: 1px solid #E4E6E8; border-radius: 8px; padding: 24px; align-self: start; }
.to-single-product .woocommerce-product-gallery__image img { max-height: 480px; object-fit: contain; width: 100%; }
.to-single-product .product_title { font-family: inherit; font-size: 32px; line-height: 1.2; margin-bottom: 24px; text-transform: none; }
.to-single-product .product_meta { font-size: 13px; color: #69717A; padding: 20px 0; border-block: 1px solid #D9DDE1; }
.to-single-product .product_meta > span { display: block; margin-bottom: 8px; }
.to-single-product .woocommerce-product-details__short-description { font-size: 14px; line-height: 1.8; }
.to-product-quote { padding-top: 20px; }
.to-product-quote p { color: #5D636B; font-size: 14px; }
.to-single-product .woocommerce-tabs, .to-single-product .related { grid-column: 1 / -1; }
.to-single-product .related > h2, .to-single-product .woocommerce-tabs h2 { font-family: inherit; font-size: 24px; }
.to-single-product .woocommerce-tabs { border-top: 1px solid #D9DDE1; padding-top: 24px; }
.to-single-product .related { margin-top: 0; }
.woocommerce ul.products li.product, .tooloffice-category-card, .tooloffice-banner-card { border-radius: 8px !important; }
.woocommerce ul.products li.product a img { background: #FFF; }
.woocommerce ul.products li.product .button, .wp-block-button__link { background: var(--to-orange) !important; border-radius: 6px !important; }
.woocommerce ul.products li.product .button:hover { filter: brightness(.9); }
.wp-block-button__link.has-white-background-color { background: #FFF !important; color: var(--to-blue) !important; }
.tooloffice-hero .wp-block-button__link { color: #FFF !important; }
.to-featured { padding-block: 48px; background: #FFF; }
.to-featured h2 { font-size: 28px; margin: 0 0 12px; font-family: inherit; }
.to-featured > .to-container > p { color: #69717A; font-size: 15px; margin: 0 0 24px; }
.tooloffice-hero { border-radius: 8px !important; background: linear-gradient(90deg,#121619E6,#12161955),url('/wp-content/uploads/2019/01/papeleria.jpg') center/cover !important; }
.tooloffice-hero h1 { font-family: inherit; font-size: 56px !important; letter-spacing: 0 !important; line-height: 1.08 !important; }
.tooloffice-hero p:first-child { color: #FFF !important; letter-spacing: 0 !important; }
.tooloffice-shop-hero { border-radius: 8px !important; background: #202326 !important; padding-block: 32px !important; box-shadow: none !important; }
.tooloffice-shop-hero h1 { font-family: inherit; font-size: 36px !important; }
.to-brands { background: #FFF; padding: 40px 0; }
.to-brands h2 { text-align: center; font-family: inherit; font-size: 13px; font-weight: 500; color: #69717A; margin: 0 0 32px; }
.to-brand-logos { display: grid; grid-template-columns: repeat(6,1fr); gap: 32px; align-items: center; }
.to-brand-logos img { display: block; width: 100%; height: 44px; object-fit: contain; }
@media(max-width:960px) {
    .to-header-main { grid-template-columns: 220px minmax(160px,1fr) auto; gap: 24px; }
    .to-header-actions span { display: none; }
    .to-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .to-contact-grid { gap: 32px; }
    .to-contact-email { font-size: 18px; }
    .to-single-product div.product { gap: 32px; }
    .to-single-product .product_title { font-size: 28px; }
}
@media(max-width:700px) {
    .to-container { width: calc(100% - 32px); }
    .to-header-main { grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding-block: 16px; }
    .to-brand .to-logo { width: 205px; }
    .to-header-actions { gap: 8px; }
    .to-header-actions a { width: 36px; justify-content: center; }
    .to-header-actions a:last-of-type { width: 36px; height: 36px; }
    .to-mobile-menu { display: grid; place-items: center; width: 36px; }
    .to-search { grid-column: 1 / -1; grid-row: 2; }
    .to-navigation { display: none; align-items: stretch; gap: 0; padding-block: 8px; }
    .to-navigation.is-open { display: flex; flex-direction: column; }
    .to-primary-menu { flex-direction: column; gap: 0; }
    .to-primary-menu > li > a { display: block; padding: 12px 0; }
    .to-catalog-nav { flex-wrap: wrap; border: 0; padding: 0; }
    .to-catalog-nav > a { padding: 12px 0; flex: 1; }
    #to-categories { position: static; flex-basis: 100%; box-shadow: none; border: 0; padding: 0 0 8px; }
    .to-nav-quote { margin: 0; padding: 16px 0; }
    .to-primary-menu .sub-menu { position: static; display: block; box-shadow: none; padding-block: 8px; }
    .to-contact { padding-block: 32px 48px; }
    .to-contact h1 { font-size: 36px; }
    .to-contact-intro > p:last-child { font-size: 16px; }
    .to-contact-grid { grid-template-columns: 1fr; }
    .to-contact-form { padding: 24px 20px; }
    .to-contact-email { font-size: 21px; }
    .to-form-grid { gap: 16px; }
    .to-dialog-body { padding: 32px 20px 24px; }
    .to-quote-dialog h2 { font-size: 24px; }
    .to-single-product { padding-inline: 16px !important; }
    .to-single-product div.product { grid-template-columns: minmax(0,1fr); gap: 28px; }
    .to-single-product .product_title { font-size: 26px; }
    .to-single-product .woocommerce-product-gallery__image img { max-height: 350px; }
    .woocommerce ul.products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px; }
    .woocommerce ul.products li.product .button { font-size: 12px; padding: 10px 12px; margin-inline: 12px; }
    .tooloffice-hero h1 { font-size: 36px !important; }
    .tooloffice-shop-hero h1 { font-size: 28px !important; }
    .to-brand-logos { grid-template-columns: repeat(3,1fr); gap: 28px; }
    .to-brand-logos img { height: 34px; }
    .to-footer-grid { gap: 32px 20px; }
    .to-footer-grid > div:first-child, .to-footer-grid > div:last-child { grid-column: 1 / -1; }
    .to-footer-bottom { flex-direction: column; }
}
@media(max-width:480px) { .to-form-grid { grid-template-columns: 1fr; } }
@media(max-width:380px) { .to-brand .to-logo { width: 170px; } .to-header-actions { gap: 4px; } }
