/** * Price per category - frontend table + breakdown styling. * Plain, theme-friendly defaults; override in your template if needed. */ /* ---- Frontend product page: the per-category table ---- */ .hikashop_pricecat_box { margin: 0 0 1em 0; } .hikashop_pricecat_table { width: 100%; max-width: 420px; border-collapse: collapse; margin: 0; } .hikashop_pricecat_table th, .hikashop_pricecat_table td { padding: .55em .75em; border-bottom: 1px solid rgba(0, 0, 0, .08); vertical-align: middle; } .hikashop_pricecat_table thead th { font-size: .82em; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #777; text-align: left; border-bottom-color: rgba(0, 0, 0, .15); } .hikashop_pricecat_table .hikashop_pricecat_label { font-weight: 600; } .hikashop_pricecat_table .hikashop_pricecat_price { text-align: right; white-space: nowrap; color: #555; } .hikashop_pricecat_table .hikashop_pricecat_qty { text-align: right; width: 5.5em; /* anchor for the "maximum reached" notify tooltip: without a positioned cell, notify.js resolves against and the tooltip lands off-screen. */ position: relative; } .hikashop_pricecat_input { width: 4.5em; padding: .35em .4em; text-align: center; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; } .hikashop_pricecat_input:focus { outline: none; border-color: #2a7de1; box-shadow: 0 0 0 2px rgba(42, 125, 225, .2); } /* Total row: stands out from the category rows */ .hikashop_pricecat_total_row td { border-top: 2px solid rgba(0, 0, 0, .25); border-bottom: none; padding-top: .7em; font-size: 1.05em; } .hikashop_pricecat_total_row .hikashop_pricecat_label { font-weight: 700; } .hikashop_pricecat_total { text-align: right; font-weight: 700; } /* ---- Breakdown shown on cart / checkout / order / invoice ---- */ .hikashop_pricecat_breakdown { display: inline-block; line-height: 1.5; } .hikashop_pricecat_item { white-space: nowrap; } .hikashop_pricecat_breakdown .hikashop_pricecat_qty { font-weight: 600; } .hikashop_pricecat_breakdown .hikashop_pricecat_x { opacity: .6; margin: 0 .15em; } .hikashop_pricecat_breakdown .hikashop_pricecat_price { color: #777; } /* ---- Frontend listing: the Travelers filter (fake dropdown) ---- */ .hikashop_pricecat_dd { position: relative; display: inline-block; } .hikashop_pricecat_dd_toggle { display: inline-flex; align-items: center; gap: .6em; min-width: 11em; justify-content: space-between; padding: .5em .8em; border: 1px solid rgba(0, 0, 0, .25); border-radius: 6px; background: #fff; font: inherit; color: inherit; cursor: pointer; } .hikashop_pricecat_dd_toggle:hover { border-color: rgba(0, 0, 0, .45); } .hikashop_pricecat_dd_caret { display: inline-block; width: .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .15s ease; } .hikashop_pricecat_dd.open .hikashop_pricecat_dd_caret { transform: rotate(-135deg) translateY(-1px); } .hikashop_pricecat_dd_panel { position: absolute; z-index: 60; top: calc(100% + .35em); left: 0; min-width: 16em; padding: .7em .9em; background: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } .hikashop_pricecat_filter_row { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: .35em 0; } .hikashop_pricecat_filter_row label { flex: 1; } .hikashop_pricecat_filter_input { width: 4em; padding: .3em .4em; text-align: center; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; } /* ---- Backend: category shown on each price row + the edit-dialog selector ---- */ .hikashop_pricecat_be_row { margin-top: .35em; font-size: .95em; } .hikashop_pricecat_select { min-width: 8em; }