/** * Add-on options (Extra Product Options) grouped into cards. * * EPO prints each group as: heading, a full-width
, then the checkboxes — * with the same small gap before the NEXT heading. The rule under the heading * cuts it off from its own choices, and the next heading sits closer to the * previous group's last item than to its own, so shoppers cannot tell which * heading a checkbox belongs to. Each group becomes one bordered card: the * heading is the card's header, its choices live inside it, and cards are * spaced apart. Markup and behaviour are untouched — styling only. */ .tc-extra-product-options .cpf-type-checkbox, .tc-extra-product-options .cpf-type-radio { margin-bottom: 18px !important; } .tc-extra-product-options .cpf-type-checkbox > .tc-element-inner-wrap, .tc-extra-product-options .cpf-type-radio > .tc-element-inner-wrap { border: 1px solid #d5d9dc; border-radius: 6px; background: #fff; overflow: hidden; } /* the heading becomes the card header */ .tc-extra-product-options .cpf-type-checkbox .tm-epo-element-label, .tc-extra-product-options .cpf-type-radio .tm-epo-element-label { margin: 0 !important; padding: 11px 14px !important; background: #fafbfb; border-bottom: 1px solid #d5d9dc; font-size: 15px; line-height: 1.4; } /* the divider that separated the heading from its own choices */ .tc-extra-product-options .cpf-type-checkbox .hr_divider, .tc-extra-product-options .cpf-type-radio .hr_divider, .tc-extra-product-options .cpf-type-textfield .hr_divider, .tc-extra-product-options .cpf-type-textarea .hr_divider { display: none !important; } .tc-extra-product-options .cpf-type-checkbox .tmcp-ul-wrap, .tc-extra-product-options .cpf-type-radio .tmcp-ul-wrap { margin: 0 !important; padding: 2px 14px !important; gap: 0 !important; } /* one row per choice, lightly separated, the whole row is the tap target */ .tc-extra-product-options .cpf-type-checkbox .tmcp-field-wrap, .tc-extra-product-options .cpf-type-radio .tmcp-field-wrap { margin: 0 !important; padding: 10px 0 !important; } .tc-extra-product-options .cpf-type-checkbox .tmcp-field-wrap + .tmcp-field-wrap, .tc-extra-product-options .cpf-type-radio .tmcp-field-wrap + .tmcp-field-wrap { border-top: 1px solid #eceef0; } .tc-extra-product-options .cpf-type-checkbox .tm-epo-field-label, .tc-extra-product-options .cpf-type-radio .tm-epo-field-label { cursor: pointer; } /* price sits at the right edge of its row, easy to scan down the column */ .tc-extra-product-options .cpf-type-checkbox .tc-label-inner, .tc-extra-product-options .cpf-type-radio .tc-label-inner { grid-template-columns: auto auto 1fr !important; align-items: center; } .tc-extra-product-options .cpf-type-checkbox .tc-price-wrap, .tc-extra-product-options .cpf-type-radio .tc-price-wrap { justify-self: end; white-space: nowrap; padding-left: 10px; } /* note field: heading stays attached to its input */ .tc-extra-product-options .cpf-type-textfield .tm-epo-element-label, .tc-extra-product-options .cpf-type-textarea .tm-epo-element-label { margin: 4px 0 8px !important; } /* * Groups start hidden and appear once they apply to the chosen holster type * (js/gbk-epo-groups.js). Only active while carries gbk-epo-js, which * is removed if the script fails — the options can never get stuck hidden. */ .gbk-epo-js .tc-extra-product-options .cpf-element:not(.gbk-epo-show):not(.cpf-type-variations), .gbk-epo-js .tc-extra-product-options .tmcp-field-wrap.gbk-epo-item-hidden { display: none !important; } .gbk-epo-js .tc-extra-product-options .cpf-element.gbk-epo-show { animation: gbk-epo-in .2s ease-out; } @keyframes gbk-epo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gbk-epo-js .tc-extra-product-options .cpf-element.gbk-epo-show { animation: none; } }