/** * WP EasyCart Tabs 2.0 — product page. * * Layout classes on : wpec-tabs-layout-{horizontal|vertical|accordion}, wpec-tabs-phone-{accordion|dropdown}. * Horizontal is WP EasyCart's own look. Accordion headings are added by wp-easycart-tabs.js ( .wpec-tabs-acc-h ). */ /* Vertical: tab names in a column beside the content, on screens wider than a phone ( 1.x's look ). */ @media only screen and ( min-width: 768px ) { .wpec-tabs-layout-vertical .ec_details_extra_area { border-top: 1px solid #ccc; padding-top: 25px; } .wpec-tabs-layout-vertical .ec_details_extra_area > .ec_details_tabs { float: left; width: 22%; margin-right: 3% !important; border-top: 0; } .wpec-tabs-layout-vertical .ec_details_extra_area > .ec_details_tabs > .ec_details_tab { display: block; width: 100%; margin: 0 0 6px !important; font-size: 12px !important; font-weight: normal; line-height: 1.5em; padding: 8px 0 0; } .wpec-tabs-layout-vertical .ec_details_extra_area > div { width: 75%; box-sizing: border-box; float: right; } .wpec-tabs-layout-vertical .ec_details_customer_reviews_left, .wpec-tabs-layout-vertical .ec_details_customer_reviews_form, .wpec-tabs-layout-vertical .ec_details_customer_review_list { width: 100%; margin-left: 0; } .wpec-tabs-layout-vertical .ec_details_customer_review_data { line-height: inherit; } /* Accordion on every screen: the headings replace the tab row. */ .wpec-tabs-layout-accordion .ec_details_extra_area > .ec_details_tabs { display: none !important; } } /* Accordion on phones. */ @media only screen and ( max-width: 767px ) { .wpec-tabs-phone-accordion .ec_details_extra_area > .ec_details_tabs { display: none !important; } } /* Accordion headings. */ .wpec-tabs-acc-h { display: none; margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: inherit; border: 0; } .ec_details_extra_area.wpec-tabs-is-acc > .wpec-tabs-acc-h { display: block; float: left; width: 100%; } .ec_details_extra_area.wpec-tabs-is-acc { border-top: 1px solid #ccc; } .ec_details_extra_area.wpec-tabs-is-acc > div { float: left; width: 100% !important; box-sizing: border-box; padding: 12px 2px 18px; } .wpec-tabs-acc-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 14px 2px; background: none; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; box-shadow: none; color: inherit; font: inherit; font-size: 14px; font-weight: bold; letter-spacing: .02em; line-height: 1.3; text-align: left; text-transform: uppercase; cursor: pointer; } .wpec-tabs-acc-btn::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: normal; line-height: 1; } .wpec-tabs-acc-btn[aria-expanded="true"]::after { content: "\2212"; } .wpec-tabs-acc-btn:hover, .wpec-tabs-acc-btn:focus { background: none; color: inherit; } .wpec-tabs-acc-btn:focus-visible { outline: 2px solid; outline-offset: 2px; } /* FAQ tabs. */ .wpec-tabs-faq { margin: 0; } .wpec-tabs-faq-item { border-bottom: 1px solid #e3e3e3; } .wpec-tabs-faq-item:first-child { border-top: 1px solid #e3e3e3; } .wpec-tabs-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; font-weight: bold; cursor: pointer; list-style: none; } .wpec-tabs-faq-item > summary::-webkit-details-marker { display: none; } .wpec-tabs-faq-item > summary::after { content: "+"; flex: 0 0 auto; font-size: 18px; font-weight: normal; line-height: 1; } .wpec-tabs-faq-item[open] > summary::after { content: "\2212"; } .wpec-tabs-faq-item > summary:focus-visible { outline: 2px solid; outline-offset: 2px; } .wpec-tabs-faq-answer { padding: 0 2px 12px; } .wpec-tabs-faq-answer > :last-child { margin-bottom: 0; } /* Downloads tabs. */ .wpec-tabs-downloads { list-style: none; margin: 0 !important; padding: 0 !important; } .wpec-tabs-download { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px !important; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 6px; list-style: none; } .wpec-tabs-download::before { content: none !important; } .wpec-tabs-download a { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; text-decoration: none; } .wpec-tabs-download a:hover .wpec-tabs-download-name, .wpec-tabs-download a:focus .wpec-tabs-download-name { text-decoration: underline; } .wpec-tabs-download-ext { flex: 0 0 auto; min-width: 38px; padding: 6px 4px; border-radius: 4px; background: #f1f1f1; color: #444; font-size: 10px; font-weight: bold; letter-spacing: .04em; text-align: center; } .wpec-tabs-download-name { overflow-wrap: anywhere; } .wpec-tabs-download-meta { font-size: 12px; opacity: .7; white-space: nowrap; }