/* ParfumCaravan — checkout.
   Loaded only on the checkout and order-received pages.

   The layout follows the pattern Shopify made standard because it works:
   the form on the left in a single column the eye can run down, the order
   summary parked on the right on a tinted panel so it reads as context
   rather than as another thing to fill in. On a phone the summary folds
   away above the form — WooCommerce's own block already does that, so it
   is only restyled here, not rebuilt. */

/* ==========================================================================
   1. Shell
   ========================================================================== */

body.pc-co{background:var(--pc-white)}
.pc-co__head{border-bottom:1px solid var(--pc-line)}
.pc-co__head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;
max-width:1120px;margin-inline:auto;padding:22px var(--pc-gutter)}
.pc-co__logo a{font-family:var(--pc-font-head);font-size:22px;font-weight:700;
letter-spacing:-.01em;text-transform:uppercase;color:var(--pc-magenta)}
.pc-co__logo img{max-height:38px;width:auto}
.pc-co__support{margin:0;font-size:14px;color:var(--pc-text-2)}
.pc-co__support a{color:var(--pc-ink);font-weight:600;white-space:nowrap}
.pc-co__support a:hover{color:var(--pc-magenta)}

/* Steps */
.pc-co__steps{max-width:1120px;margin-inline:auto;padding:0 var(--pc-gutter) 18px}
.pc-co__steps ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
font-family:var(--pc-font-head);font-size:13px;letter-spacing:.02em}
.pc-co__steps li+li::before{content:"›";margin-right:8px;color:var(--pc-muted)}
.pc-co__steps li{display:flex;align-items:center;color:var(--pc-muted)}
.pc-co__steps .is-done a{color:var(--pc-text-2);text-decoration:underline;
text-underline-offset:2px}
.pc-co__steps .is-done a:hover{color:var(--pc-magenta)}
.pc-co__steps .is-current span{color:var(--pc-ink);font-weight:600}

/* ==========================================================================
   2. Body
   ========================================================================== */

.pc-co__main{max-width:1120px;margin-inline:auto;padding:32px var(--pc-gutter) 48px}
.pc-co .wp-block-woocommerce-checkout,
.pc-co .wc-block-checkout{max-width:none}

/* Two columns, form first. */
.pc-co .wc-block-checkout__main{padding-right:56px}
.pc-co .wc-block-checkout__sidebar{background:var(--pc-bg);border-radius:var(--pc-radius-lg);
padding:8px 24px 24px}

/* Sticky summary: the total should stay in view while the form is filled. */
body.pc-co.pc-co--sticky .wc-block-components-sidebar{position:sticky;top:24px}

/* Step headings inside the form read as sections, not as shouting. */
.pc-co .wc-block-components-checkout-step__title,
.pc-co .wc-block-components-title{font-family:var(--pc-font-head);font-size:19px;
font-weight:500;letter-spacing:.02em;color:var(--pc-ink)}
.pc-co .wc-block-components-checkout-step{padding-bottom:26px}
.pc-co .wc-block-components-checkout-step__description{color:var(--pc-text-2);font-size:14px}

/* Fields: one column, generous target sizes, no surprises. */
.pc-co .wc-block-components-text-input input,
.pc-co .wc-block-components-textarea,
.pc-co .wc-blocks-components-select__select{
min-height:52px;border:1px solid var(--pc-line)!important;
border-radius:var(--pc-radius)!important;background:var(--pc-white);
font-family:var(--pc-font-body);font-size:16px} /* 16px: iOS must not zoom */
.pc-co .wc-block-components-text-input.is-active input:focus,
.pc-co .wc-blocks-components-select__select:focus{
border-color:var(--pc-magenta)!important;box-shadow:0 0 0 1px var(--pc-magenta);outline:0}

/* The one action on the page. */
.pc-co .wc-block-components-checkout-place-order-button{
width:100%;min-height:58px;background:var(--pc-magenta);color:var(--pc-white);
border:0;border-radius:var(--pc-radius);font-family:var(--pc-font-head);
font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.14em}
.pc-co .wc-block-components-checkout-place-order-button:hover{background:var(--pc-magenta-hover)}
/* Held for a moment while the new total arrives (assets/js/payment-sync.js). */
.pc-co .wc-block-components-checkout-place-order-button.pc-is-syncing{opacity:.7;cursor:progress}

/* Summary panel.

   WooCommerce nests a white card inside a tinted sidebar, which reads as two
   frames around one thing; the inner card is flattened into it. On a phone
   that sidebar collapses to a strip at the top of the page, and a flat grey
   slab with square edges there looks like something failed to load rather
   than like a summary you can open — so it becomes a card: white, hairline
   border, rounded, with the total carrying the accent. */
.pc-co .wp-block-woocommerce-checkout-order-summary-block,
.pc-co .wc-block-components-sidebar .wc-block-components-panel,
.pc-co .wc-block-components-order-summary,
.pc-co .wc-block-components-order-summary__content{background:transparent;border:0;
box-shadow:none;padding-inline:0}

.pc-co .wc-block-components-sidebar{background:transparent;padding:0}

/* A line item in the summary: the name column must win the space. The
   block gives the description `flex:0 1 auto` next to a price column whose
   sale badge ("Salvează 18,00 lei") refuses to wrap, so on a narrow sidebar
   the name column shrinks to a few characters and the price wraps mid-number.
   The name gets the leftover width and a floor; the badge wraps instead. */
.pc-co .wc-block-components-order-summary-item__description{flex:1 1 0;min-width:45%}
.pc-co .wc-block-components-order-summary-item__total-price{flex:0 1 auto;min-width:0;max-width:45%;text-align:right}
.pc-co .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge{white-space:normal;line-height:1.3}
/* Below a laptop width the sidebar is too narrow for a badge beside the
   price; the saving is already on the struck price under the name. */
@media (max-width:1100px){
.pc-co .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge{display:none}
}
.pc-co .wc-block-components-order-summary-item__description .price,
.pc-co .wc-block-components-order-summary-item__description .wc-block-components-product-price{white-space:nowrap}

/* WooCommerce keeps an empty notices container at the top of the sidebar for
   messages that may never come; inside the summary card it shows as a blank
   strip above the heading. */
.pc-co .wc-block-components-sidebar > .wc-block-components-notices:empty{display:none}

/* The header of the collapsible summary.

   The block stylesheet draws its own rule above and below this row and adds
   a top margin; inside the card those become a stray empty box above the
   heading. Overriding them needs !important — the block styles are more
   specific than any selector the theme can reasonably write here. */
.pc-co .wc-block-components-checkout-order-summary__title{
display:flex;align-items:center;gap:12px;width:100%;
cursor:pointer;background:none;text-align:left;
/* The inset is !important for the same reason the margin and border are:
   the block stylesheet sets its own here, and which of the two wins moves
   the heading between flush-left and a deep indent depending on whether the
   panel is open. Pinned so it always lines up with the fields under it. */
padding:16px 18px!important;
margin:0!important;border:0!important}

.pc-co .wc-block-components-checkout-order-summary__title-text{
flex:1;margin:0;font-family:var(--pc-font-head);font-size:15px;font-weight:500;
letter-spacing:.01em;color:var(--pc-ink)}
.pc-co .wc-block-components-checkout-order-summary__title-price{
font-size:16px;font-weight:700;color:var(--pc-magenta);
font-variant-numeric:tabular-nums}
.pc-co .wc-block-components-checkout-order-summary__title-icon{
display:grid;place-items:center;color:var(--pc-text-2)}
.pc-co .wc-block-components-checkout-order-summary__title-icon svg{
width:20px;height:20px;fill:currentColor;transition:transform .2s ease}

.pc-co .wc-block-components-checkout-order-summary__content{padding:0 18px 16px}

/* The short description belongs on the product page. In a summary its job
   is already done — the buyer has decided — and it pushes the total below
   the fold. Name, variant, quantity, price. */
.pc-co .wc-block-components-product-metadata__description{display:none}
.pc-co .wc-block-components-totals-item{font-size:15px}
.pc-co .wc-block-components-totals-footer-item{font-size:18px;font-weight:700}
.pc-co .wc-block-components-product-name{font-family:var(--pc-font-head);
font-size:15px;font-weight:500;letter-spacing:.02em}
.pc-co .wc-block-components-product-price__value{font-weight:600}
.pc-co .wc-block-components-panel__button{font-family:var(--pc-font-head);
font-size:14px;font-weight:500}

/* The shipping row is left in the normal colour on purpose: before an
   address is entered it reads "enter address to calculate", and colouring
   that green makes a placeholder look like good news. */

/* ==========================================================================
   2b. The same page, on the shortcode checkout
   ==========================================================================

   Everything above targets `wc-block-checkout-*`, which only exists once the
   checkout page has been converted to blocks. Until that conversion happens
   the page still renders `[woocommerce_checkout]`, and none of it applied:
   the form came out as one full-width column with the order summary dumped
   underneath it. The layout below is the same idea expressed against the
   classic markup — form left, summary parked on the right — so the two look
   alike and the conversion, when it comes, changes nothing visible.

   The DOM it works on:
     form.checkout
       #customer_details.col2-set  →  .col-1 (billing) + .col-2 (shipping, notes)
       h3#order_review_heading
       #order_review               →  the totals table + #payment
   ========================================================================== */

.pc-co form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 420px;
gap:0 56px;align-items:start}
.pc-co form.checkout > #customer_details{grid-column:1;grid-row:1/span 2}
.pc-co form.checkout > #order_review_heading{grid-column:2;grid-row:1;
margin:0 0 16px;font-family:var(--pc-font-head);font-size:19px;font-weight:500;
letter-spacing:.02em}
.pc-co form.checkout > #order_review{grid-column:2;grid-row:2}

/* The summary should stay in view while a long form is filled. */
body.pc-co.pc-co--sticky form.checkout > #order_review{position:sticky;top:24px}

/* Billing above shipping above notes. Side by side they would make three
   columns across one screen, and the second one holds a single checkbox. */
.pc-co #customer_details{display:block}
.pc-co #customer_details .col-1,
.pc-co #customer_details .col-2{width:auto;float:none;margin:0}
.pc-co #customer_details .col-2{margin-top:4px}

.pc-co #customer_details h3{font-family:var(--pc-font-head);font-size:19px;
font-weight:500;letter-spacing:.02em;margin:0 0 18px}
.pc-co #customer_details .col-2 h3{margin-top:8px}

/* Same targets as the block fields above: 52px to press, 16px so iOS does
   not zoom the page on focus. */
.pc-co .woocommerce form .form-row input.input-text,
.pc-co .woocommerce form .form-row textarea,
.pc-co .woocommerce form .form-row select,
.pc-co .select2-container .select2-selection--single{min-height:52px;font-size:16px}
.pc-co .select2-container .select2-selection--single
.select2-selection__rendered{line-height:30px}
.pc-co .woocommerce form .form-row textarea{min-height:96px}

/* Summary panel: one tinted block holding the order and the payment step,
   rather than a bare table followed by a separate grey slab. */
.pc-co #order_review{background:var(--pc-bg);border-radius:var(--pc-radius-lg);
padding:6px 22px 22px}

/* "PRODUS / SUB-TOTAL" over a summary this narrow is a header for a table
   nobody is reading as a table. */
.pc-co #order_review table.shop_table thead{display:none}
.pc-co #order_review table.shop_table{width:100%;border:0;background:transparent;
border-radius:0}
.pc-co #order_review table.shop_table th,
.pc-co #order_review table.shop_table td{padding:12px 0;border:0;
border-bottom:1px solid var(--pc-line);background:transparent;vertical-align:top}
.pc-co #order_review table.shop_table tfoot tr:last-child th,
.pc-co #order_review table.shop_table tfoot tr:last-child td{border-bottom:0}
.pc-co #order_review table.shop_table td.product-name{font-size:14px;
line-height:1.45;padding-right:12px}
/* The price column shrinks to its content and the name gets the rest.
   `nowrap` on every tfoot cell instead of just the prices is what squeezed
   the product names down to one word per line: the shipping cell holds
   "GLS - Livrare prin curier rapid: 20,00 lei", and refusing to break that
   set the whole column's width. */
/* In the item list the price shrinks to its content and the name takes the
   rest. `width:1%` with `nowrap` is the usual way to say that. */
.pc-co #order_review table.shop_table tbody td.product-total{width:1%;
text-align:right;white-space:nowrap}

/* The totals stop being table rows and become label/value pairs.

   As table cells they shared their columns with the item list above, and a
   single long label — "3% REDUCERE - PLATA CARD ONLINE" — set the width for
   everything: the label column came out at 289px of a 376px panel and the
   amounts were left with 87px, so "640,80 lei" broke across three lines.
   A percentage does not fix it; in automatic table layout `width` is a
   suggestion the browser may ignore, and it did. Flex rows have no columns
   to share, so each row sizes itself. */
.pc-co #order_review table.shop_table tfoot tr{display:flex;align-items:baseline;
justify-content:space-between;gap:16px;
border-bottom:1px solid var(--pc-line)}
.pc-co #order_review table.shop_table tfoot tr:last-child{border-bottom:0}
.pc-co #order_review table.shop_table tfoot th,
.pc-co #order_review table.shop_table tfoot td{display:block;width:auto;
border-bottom:0}
.pc-co #order_review table.shop_table tfoot td{text-align:right;
flex:0 1 auto;min-width:0}
.pc-co #order_review tr.order-total td small.includes_tax{display:block;
margin-top:3px;font-size:12px;font-weight:400;color:var(--pc-muted)}

/* The delivery options are the one row that needs the full panel width —
   two courier names beside a label do not fit in what is left of 376px. */
.pc-co #order_review table.shop_table tfoot tr.woocommerce-shipping-totals{
flex-wrap:wrap;gap:0}
.pc-co #order_review tr.woocommerce-shipping-totals th{flex:1 1 100%;
padding-bottom:6px}
.pc-co #order_review tr.woocommerce-shipping-totals td{flex:1 1 100%;
text-align:left;padding-top:0}
.pc-co #order_review table.shop_table tfoot th{font-size:12px;
text-transform:uppercase;letter-spacing:.08em;color:var(--pc-text-2);font-weight:500}
.pc-co #order_review table.shop_table tfoot .order-total th,
.pc-co #order_review table.shop_table tfoot .order-total td{font-size:17px;
color:var(--pc-ink);text-transform:none;letter-spacing:0;padding-top:16px}
.pc-co #order_review .product-quantity{font-weight:600;white-space:nowrap}

/* Shipping choices, same treatment as in the basket. */
.pc-co #order_review ul#shipping_method{list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:8px;text-align:left}
.pc-co #order_review ul#shipping_method li{margin:0;padding:0;display:flex;
align-items:flex-start;gap:8px}
.pc-co #order_review ul#shipping_method li input[type=radio]{margin:3px 0 0;
flex:0 0 auto;accent-color:var(--pc-magenta)}
.pc-co #order_review ul#shipping_method li label{margin:0;line-height:1.45;
font-size:14px;cursor:pointer}

/* The payment step already sits inside the panel, so it drops its own frame
   and just carries a rule above it. */
.pc-co .woocommerce-checkout #payment{background:transparent;border-radius:0;
padding:0;margin-top:20px;border-top:1px solid var(--pc-line);padding-top:20px}
.pc-co #payment ul.payment_methods{margin:0;padding:0;border:0;list-style:none;
display:flex;flex-direction:column;gap:12px}
.pc-co #payment ul.payment_methods li{margin:0;padding:0}
.pc-co #payment ul.payment_methods label{display:inline-flex;align-items:center;
gap:8px;margin:0;font-size:15px;cursor:pointer}
.pc-co #payment ul.payment_methods input[type=radio]{accent-color:var(--pc-magenta)}
.pc-co #payment div.payment_box{margin:10px 0 0;padding:14px 16px;
background:var(--pc-white);border-radius:var(--pc-radius);
font-size:14px;line-height:1.5;color:var(--pc-text-2)}
.pc-co #payment div.payment_box::before{display:none}
.pc-co #payment .woocommerce-privacy-policy-text{font-size:13px;
line-height:1.5;color:var(--pc-muted)}
.pc-co #payment .woocommerce-terms-and-conditions-wrapper{margin:16px 0 0}
.pc-co #payment .form-row.validate-required label{display:flex;align-items:flex-start;
gap:9px;font-size:14px;line-height:1.45}
.pc-co #payment .place-order{margin:18px 0 0;padding:0}
.pc-co .woocommerce #place_order{min-height:58px;font-size:13px}

/* One column below the point where a 420px summary stops leaving the form a
   usable width. Source order already reads form → summary → payment. */
@media (max-width:980px){
.pc-co form.checkout{grid-template-columns:minmax(0,1fr);gap:0}
.pc-co form.checkout > #customer_details,
.pc-co form.checkout > #order_review_heading,
.pc-co form.checkout > #order_review{grid-column:1;grid-row:auto}
.pc-co form.checkout > #order_review_heading{margin-top:28px}
body.pc-co.pc-co--sticky form.checkout > #order_review{position:static}
}

/* Belt and braces for the WhatsApp bubble; the PHP filter in
   pc_checkout_silence() is what actually keeps it off the page. */
.pc-co .joinchat,
.pc-co #joinchat{display:none!important}

/* ==========================================================================
   3. Footer
   ========================================================================== */

.pc-co__foot{border-top:1px solid var(--pc-line);margin-top:16px}
.pc-co__trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;
max-width:1120px;margin-inline:auto;padding:22px var(--pc-gutter) 0;
font-size:14px;color:var(--pc-text-2)}
.pc-co__trust li{display:flex;align-items:center;gap:8px}
.pc-co__trust svg{color:var(--pc-success);flex:0 0 auto}

.pc-co__foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:12px 24px;max-width:1120px;margin-inline:auto;padding:20px var(--pc-gutter) 40px}
.pc-co__back{font-size:14px;color:var(--pc-text-2)}
.pc-co__back:hover{color:var(--pc-magenta)}
.pc-co__legal{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--pc-text-2)}
.pc-co__legal a:hover{color:var(--pc-magenta);text-decoration:underline}

/* ==========================================================================
   4. Narrow screens
   ========================================================================== */

@media (max-width:900px){
.pc-co .wc-block-checkout__main{padding-right:0;padding-top:0}
/* The block adds desktop breathing room above the first thing on the page;
   on a phone that is a screenful of nothing between the steps and the
   summary. */
.pc-co .wc-block-checkout{padding-top:12px}

/* The collapsed summary as a card rather than a grey band across the page:
   it is the one thing above the form, and it should look like something to
   open, not like a divider. */
.pc-co .wc-block-checkout__sidebar{padding:0;margin:0 0 20px;
	background:var(--pc-white);border:1px solid var(--pc-line);
	border-radius:var(--pc-radius-lg);overflow:hidden}
.pc-co .wc-block-components-checkout-order-summary__content{
	border-top:1px solid var(--pc-line);padding-top:14px;margin-top:0}
/* Only on a phone, where the summary is a bordered card: the rows take the
   same inset as its heading so the panel reads as one column. On desktop
   the summary is a bare sidebar with no edge to sit in, and the same padding
   there only squeezes the product names into more lines.
   12px rather than the 18px the heading uses on a wider screen — on a 430px
   phone every pixel of inset comes out of the product name, which was
   wrapping to three lines to pay for it. */
.pc-co .wc-block-components-checkout-order-summary__title{padding:14px 12px!important}
.pc-co .wc-block-components-order-summary__content{padding-inline:12px}
.pc-co .wc-block-components-checkout-order-summary__content{padding:0 12px 14px}
body.pc-co.pc-co--sticky .wc-block-components-sidebar{position:static}

.pc-co__head-inner{padding-block:14px}
.pc-co__logo a{font-size:18px}
.pc-co__trust{gap:10px 20px;font-size:13px}
.pc-co__foot-bar{justify-content:center;text-align:center}

/* Section headings were carrying desktop spacing into a screen that has
   none to spare between the summary and the first field. */
.pc-co .wc-block-components-checkout-step{padding-left:0;margin-bottom:22px}
.pc-co .wc-block-components-checkout-step__heading{margin:0 0 12px}
.pc-co .wc-block-components-checkout-step__title{font-size:17px}

/* The order bar covers the bottom of the page, so the form has to end
   above it — otherwise the last field is unreachable behind the button. */
.pc-co__main{padding-bottom:96px}
}

@media (max-width:560px){
.pc-co__support{display:none}
.pc-co__main{padding-top:16px}
}

/* ==========================================================================
   5. Mobile order bar

   Only below the desktop breakpoint: on a wide screen the real button is
   never far away, and a second one would just be a second thing to read.
   ========================================================================== */

.pc-co__bar{display:none}

@media (max-width:900px){
.pc-co__bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
display:flex;align-items:center;gap:12px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:var(--pc-white);border-top:1px solid var(--pc-line);
box-shadow:0 -6px 20px rgba(0,0,0,.08);
transform:translateY(0);transition:transform .2s ease}
.pc-co__bar.is-hidden{transform:translateY(110%)}

.pc-co__bar-total{display:flex;flex-direction:column;line-height:1.15;flex:0 0 auto}
.pc-co__bar-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--pc-text-2)}
.pc-co__bar-total strong{font-size:18px;font-weight:700}

.pc-co__bar-btn{flex:1;min-height:50px;padding:0 16px;border:0;
border-radius:var(--pc-radius);background:var(--pc-magenta);color:var(--pc-on-accent);
font-family:var(--pc-font-head);font-size:12px;font-weight:500;
text-transform:uppercase;letter-spacing:.12em}
.pc-co__bar-btn:disabled{opacity:.45}

/* Room so the bar never covers the last field. */
.pc-co .pc-co__foot{padding-bottom:80px}

/* Tighter vertical rhythm: fewer scrolls to the end of the form. */
.pc-co .wc-block-components-checkout-step{padding-bottom:18px}
.pc-co .wc-block-components-text-input input,
.pc-co .wc-blocks-components-select__select{min-height:48px}
}

/* County → city.

   The select replaces the text box only once it has options in it, so a
   failed request or a saved address that is not on the list leaves the
   buyer with a working field rather than an empty dropdown. */
.pc-city-select{display:none}
.pc-city--ready input{display:none}
.pc-city--ready .pc-city-select{display:block;width:100%;min-height:52px;
padding:22px 14px 6px;font-family:var(--pc-font-body);font-size:16px;
color:var(--pc-ink);background:var(--pc-white);
border:1px solid var(--pc-line);border-radius:var(--pc-radius);
-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.pc-city--ready .pc-city-select:focus{outline:0;border-color:var(--pc-magenta);
box-shadow:0 0 0 1px var(--pc-magenta)}
.pc-city--ready .pc-city-select:disabled{color:var(--pc-muted);background:var(--pc-bg)}
/* The block floats the label up only when its input holds a value, and our
   input is empty until a locality is picked — so the label would sit across
   the middle of the dropdown, on top of "Alege localitatea". A select always
   shows something, so the label is always in its raised position, matching
   the county field beside it. */
.pc-co .pc-city--ready label{position:absolute!important;top:6px!important;
left:10px!important;font-size:13px!important;line-height:1.4!important;
transform:none!important;z-index:1;pointer-events:none}

/* ==========================================================================
   6. Order received

   The page a customer lands on straight after paying, and the one the theme
   had left entirely to WooCommerce: a bare table under a bordered sentence.
   It is also where the order number and delivery estimate get read, so it is
   worth the same care as the form that led here.
   ========================================================================== */

.pc-co .woocommerce-order{max-width:640px;margin-inline:auto}
.pc-co .woocommerce-notice--success,
.pc-co .woocommerce-thankyou-order-received{display:block;margin:0 0 8px;padding:0;
border:0;background:none;font-family:var(--pc-font-head);font-size:26px;
font-weight:600;line-height:1.2;color:var(--pc-ink)}
.pc-co .woocommerce-notice--success::before{content:none}

/* Order number, date, total, payment method — the receipt line. */
.pc-co .woocommerce-order-overview{display:grid;gap:0;margin:22px 0;padding:0;
list-style:none;border:1px solid var(--pc-line);border-radius:var(--pc-radius-lg);
overflow:hidden}
.pc-co .woocommerce-order-overview li{display:flex;align-items:baseline;
justify-content:space-between;gap:16px;margin:0;padding:13px 16px;
border-bottom:1px solid var(--pc-line);font-size:14px;color:var(--pc-text-2);
text-transform:none;border-right:0}
.pc-co .woocommerce-order-overview li:last-child{border-bottom:0}
.pc-co .woocommerce-order-overview li strong{font-size:15px;color:var(--pc-ink);
text-align:right}

.pc-co .woocommerce-order-details__title,
.pc-co .woocommerce-column__title{font-family:var(--pc-font-head);font-size:17px;
font-weight:600;margin:28px 0 12px}
.pc-co .woocommerce-table--order-details{width:100%;border-collapse:collapse;
font-size:14px}
/* One inset for every cell in the table, head to footer, so the labels and
   the figures sit in the same two columns all the way down. */
.pc-co .woocommerce-table--order-details th,
.pc-co .woocommerce-table--order-details td{padding:12px 16px;text-align:left;
border-bottom:1px solid var(--pc-line);vertical-align:top}
/* The shop_table rule fills every <th> with the grey used for table heads.
   In the footer that paints a slab across the left half of each totals row
   and stops mid-line — a two-tone block where a receipt wants a clean
   column. The head row keeps its fill; these do not. */
.pc-co .woocommerce-table--order-details tfoot th{background:none;
font-weight:500;font-size:14px;text-transform:none;
letter-spacing:0;color:var(--pc-text-2)}
/* The shipping method rides along after the amount; it is a note, not a
   figure. */
.pc-co .woocommerce-table--order-details tfoot small{display:block;margin-top:2px;
font-size:12px;font-weight:400;color:var(--pc-muted)}
.pc-co .woocommerce-table--order-details td:last-child,
.pc-co .woocommerce-table--order-details th:last-child{text-align:right;
white-space:nowrap}
.pc-co .woocommerce-table--order-details tfoot tr:last-child th,
.pc-co .woocommerce-table--order-details tfoot tr:last-child td{font-size:17px;
font-weight:700;color:var(--pc-ink);border-bottom:0}

/* --- The two ticks under the email -------------------------------------
   A box to ask for a company invoice and a box to open an account: two short
   lines that WooCommerce stacks into four, with "În prezent, verifici ca
   vizitator." wedged between them. Four stacked rows above the delivery
   address read as a second form to fill in; side by side they read as what
   they are, two optional extras.

   Wrapping does the arranging rather than any rule that knows where in the
   list each one sits — which matters, because the list changes: tick the
   company box and its three fields appear between the two, each taking a
   full row, and the pair comes apart on its own. */
.pc-co #contact{display:flex;flex-wrap:wrap;column-gap:22px}
.pc-co #contact > *{flex:1 0 100%}
.pc-co #contact > .wc-block-components-checkbox{flex:0 1 auto;margin-top:14px}

/* The guest notice is the same news the box beside it already carries, and
   once the email is known it is the wrong news — see .pc-has-account. */
.pc-co .wc-block-checkout__guest-checkout-notice{display:none}

/* What replaces the offer when the address turns out to have an account. */
.pc-co .pc-has-account{margin:14px 0 0;font-size:14px;line-height:1.5;
color:var(--pc-text-2)}
.pc-co .pc-has-account a{color:var(--pc-ink);font-weight:600;
text-underline-offset:3px}

/* On a phone the two do not fit, and left to itself flex would squeeze them
   until each label wrapped inside its own box rather than moving one down —
   two cramped columns instead of two clean lines. Below this width they are
   simply rows again, at the tighter spacing. */
@media (max-width:560px){
.pc-co #contact > .wc-block-components-checkbox,
.pc-co #contact > .woo-ml-subscribe-wrapper{flex:1 0 100%;margin-top:12px}
}

/* MailerLite's opt-in is a plain browser checkbox dropped into the same
   row as the block checkout's own — 13px native box next to two 18px drawn
   ones, 16px label next to 13px labels. Dressed here as one of them: same
   box, same border, same mark, same label, same place in the row. The
   plugin owns the markup (wrapper > label > input + span) and the text. */
.pc-co #contact > .woo-ml-subscribe-wrapper{flex:0 1 auto;margin-top:14px}
.pc-co .woo-ml-subscribe-wrapper label{display:flex;align-items:flex-start;gap:8px;
margin:0;font-size:13px;line-height:20px;color:var(--pc-ink);cursor:pointer}
.pc-co .woo-ml-subscribe-wrapper input[type=checkbox]{appearance:none;-webkit-appearance:none;
position:relative;flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;
border:1px solid rgba(17,17,17,.48);border-radius:4px;background:#fff;cursor:pointer}
.pc-co .woo-ml-subscribe-wrapper input[type=checkbox]:checked::after{content:"";position:absolute;
inset:0;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/15px no-repeat}
.pc-co .woo-ml-subscribe-wrapper input[type=checkbox]:focus-visible{outline:2px solid var(--pc-ink);outline-offset:2px}

/* --- The two addresses -------------------------------------------------
   Between them they hold about a dozen short lines, and the stock markup
   spends a screen and a half on them: a full-width row each, a 28px heading
   above each, 1.6 line height, and a box that starts below the heading
   rather than around it. It is the least surprising thing on the page — the
   shopper typed it two minutes ago — so it gets the room it deserves and no
   more. Side by side where there is width, stacked where there is not, and
   one box per address either way, with the heading inside it. */
.pc-co .woocommerce-customer-details .woocommerce-columns--addresses{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
margin:22px 0 0}

/* The column is the card now. `min-width:0` because a long street name in a
   grid track would otherwise push the pair wider than the page. */
.pc-co .woocommerce-customer-details .woocommerce-column{padding:13px 15px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);min-width:0}

/* Set as a label rather than a heading: inside the box it is naming the
   four lines under it, which is the job the table heads and the "CE
   URMEAZĂ" caption on this same page already do at this size. */
.pc-co .woocommerce-customer-details .woocommerce-column__title{margin:0 0 6px;
font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;
text-transform:uppercase;color:var(--pc-muted)}

.pc-co .woocommerce-customer-details address{font-style:normal;line-height:1.45;
padding:0;border:0;font-size:14px}
/* Phone and email arrive as paragraphs after a run of <br>. They are the
   same address, so they need separating from the street by a line's worth
   of space and a lighter ink — not by a paragraph gap. */
.pc-co .woocommerce-customer-details address p{margin:4px 0 0;
color:var(--pc-text-2)}

@media (max-width:640px){
.pc-co .woocommerce-customer-details .woocommerce-columns--addresses{
grid-template-columns:1fr;gap:10px}
}

/* --- Additional information --------------------------------------------
   A checkout opt-in printed on the confirmation: the question is the label
   and the answer is one word. At the default heading size, with the label
   set as body copy, a marketing consent ends up the largest thing under the
   address. It is meta, so it is set as meta. */
.pc-co .wc-block-order-confirmation-additional-fields-wrapper{margin-top:26px}
.pc-co .wc-block-order-confirmation-additional-fields-wrapper h2{
margin:0 0 10px;font-family:var(--pc-font-head);font-size:17px;font-weight:600}
.pc-co .wc-block-components-additional-fields-list{margin:0;
padding:14px 16px;border:1px solid var(--pc-line);border-radius:var(--pc-radius)}
.pc-co .wc-block-components-additional-fields-list dt{margin:0 0 3px;
font-size:12px;line-height:1.45;color:var(--pc-muted)}
.pc-co .wc-block-components-additional-fields-list dd{margin:0 0 12px;
font-size:14px;font-weight:600;color:var(--pc-ink)}
.pc-co .wc-block-components-additional-fields-list dd:last-child{margin-bottom:0}

/* A finished order is not a dead end. */
.pc-co__after{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 8px}
.pc-co__after .pc-btn{flex:1 1 200px;justify-content:center}

@media (max-width:900px){
	.pc-co .woocommerce-notice--success,
	.pc-co .woocommerce-thankyou-order-received{font-size:22px}
	.pc-co .woocommerce-order-overview li{flex-direction:column;gap:2px;
		align-items:flex-start}
	.pc-co .woocommerce-order-overview li strong{text-align:left}
}

/* The right of withdrawal, stated before the order is placed. */
.pc-co__withdrawal{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--pc-text-2)}
.pc-co__withdrawal a{color:var(--pc-ink);text-decoration:underline;text-underline-offset:2px}
.pc-co__withdrawal a:hover{color:var(--pc-magenta)}
.pc-co__withdrawal .pc-withdrawal-note__exception{color:var(--pc-muted)}

/* ==========================================================================
   7. The confirmation

   Three blocks in the order they are wanted: the fact, the timeline, the
   thing still to do. The receipt WooCommerce prints keeps its place below
   them — it is a record, not a headline, so it is styled as one.
   ========================================================================== */

/* WooCommerce's own "Thank you. Your order has been received." now duplicates
   the hero above it. */
.pc-co--received .woocommerce-notice--success,
.pc-co--received .woocommerce-thankyou-order-received{display:none}

/* So does its five-row overview, once the page is built this way: the number
   and the email are in the hero, the total and the payment method are in the
   card below it and again in the order table, and the date is the first step
   of the track. Five rows of things said twice, between the confirmation and
   what the buyer still has to do. */
.pc-co--received .woocommerce-order-overview{display:none}

.pc-ty{text-align:center;padding:8px 0 4px}
.pc-ty__mark{display:inline-grid;place-items:center;width:72px;height:72px;
margin-bottom:16px;border-radius:50%;color:var(--pc-success);
background:var(--pc-success-bg)}

/* The mark draws itself once. Two strokes, ring then tick, so it reads as
   "checked" rather than as a logo that happens to move. */
.pc-ty__ring,.pc-ty__tick{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.pc-ty__ring{--len:145;animation:pc-ty-draw .5s ease-out forwards}
.pc-ty__tick{--len:40;animation:pc-ty-draw .3s ease-out .38s forwards}
@keyframes pc-ty-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
	.pc-ty__ring,.pc-ty__tick{animation:none;stroke-dashoffset:0}
}

.pc-ty__title{margin:0 0 6px;font-family:var(--pc-font-head);
font-size:clamp(24px,3.4vw,30px);font-weight:600;letter-spacing:.01em;
line-height:1.15;color:var(--pc-ink);text-wrap:balance}
.pc-ty__lead{margin:0 0 10px;font-size:16px;color:var(--pc-text-2)}
.pc-ty__lead strong{color:var(--pc-ink);font-weight:600;
font-variant-numeric:tabular-nums}
.pc-ty__mail{display:inline-flex;align-items:center;gap:7px;margin:0;
padding:7px 14px;border-radius:99px;background:var(--pc-bg);
font-size:13px;color:var(--pc-text-2);overflow-wrap:anywhere}
.pc-ty__mail svg{flex:0 0 auto;color:var(--pc-muted)}

/* --- The track ---------------------------------------------------------- */

/* The track is centred as a block, not as text: the dots have to stay in a
   column and the labels have to stay left-aligned against them, so it is the
   list that moves, not the words inside it. */
.pc-ty-next{margin:30px 0 0;text-align:center}
.pc-ty-next__title,
.pc-ty-pay__title{margin:0 0 14px;font-family:var(--pc-font-head);
font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--pc-text-2)}
.pc-ty-next__steps{list-style:none;margin:0;padding:0;
display:inline-grid;gap:0;text-align:left}
.pc-ty-next__step{position:relative;display:flex;gap:14px;padding:0 0 22px}
.pc-ty-next__step:last-child{padding-bottom:0}
/* The line joins the dots and stops at the last one. */
.pc-ty-next__step::before{content:"";position:absolute;left:13px;top:26px;
bottom:0;width:2px;background:var(--pc-line)}
.pc-ty-next__step:last-child::before{content:none}
.pc-ty-next__step.is-done::before{background:var(--pc-success)}

.pc-ty-next__dot{flex:0 0 28px;width:28px;height:28px;display:grid;
place-items:center;border-radius:50%;background:var(--pc-white);
box-shadow:inset 0 0 0 2px var(--pc-line);
font-size:12px;font-weight:700;color:var(--pc-muted);
font-variant-numeric:tabular-nums}
.pc-ty-next__step.is-done .pc-ty-next__dot{background:var(--pc-success);
color:var(--pc-on-accent);box-shadow:none}

.pc-ty-next__body{display:flex;flex-direction:column;gap:2px;padding-top:3px;
min-width:0}
.pc-ty-next__body strong{font-size:15px;font-weight:600;color:var(--pc-ink)}
.pc-ty-next__step:not(.is-done) .pc-ty-next__body strong{color:var(--pc-text-2)}
.pc-ty-next__body span{font-size:13px;color:var(--pc-muted)}

/* --- The bank transfer -------------------------------------------------- */

.pc-ty-pay{margin:30px 0 0;padding:20px;border-radius:var(--pc-radius-lg);
background:var(--pc-bg)}
.pc-ty-pay__title{margin-bottom:8px}
.pc-ty-pay__intro{margin:0 0 16px;font-size:14px;line-height:1.55;
color:var(--pc-text-2)}

/* The IBAN is the reason this block exists, so it is the only thing in it
   set on white with a border. */
.pc-ty-pay__iban{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;
padding:14px 16px;border:1px solid var(--pc-line);border-radius:var(--pc-radius);
background:var(--pc-white)}
.pc-ty-pay__label{flex:0 0 auto;font-size:11px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--pc-muted)}
.pc-ty-pay__value{flex:1 1 220px;min-width:0;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:15px;letter-spacing:.02em;color:var(--pc-ink);overflow-wrap:anywhere}
.pc-ty-pay__copy{flex:0 0 auto;padding:9px 16px;border:0;cursor:pointer;
border-radius:var(--pc-radius);background:var(--pc-ink);color:var(--pc-white);
font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.1em;
transition:background-color .15s}
.pc-ty-pay__copy:hover{background:var(--pc-magenta)}
.pc-ty-pay__copy.is-copied{background:var(--pc-success)}

.pc-ty-pay__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;margin:14px 0 0}
.pc-ty-pay__meta dt{margin:0 0 2px;font-size:12px;color:var(--pc-muted)}
.pc-ty-pay__meta dd{margin:0;font-size:15px;font-weight:600;color:var(--pc-ink)}
.pc-ty-pay__rest{margin:14px 0 0;font-size:13px;color:var(--pc-text-2)}
.pc-ty-pay__rest p{margin:0}

/* --- Payment on delivery ------------------------------------------------ */

.pc-ty-note{margin:24px 0 0;padding:14px 16px;border-radius:var(--pc-radius);
background:var(--pc-bg);font-size:14px;color:var(--pc-text-2)}
.pc-ty-note strong{color:var(--pc-ink)}

/* --- The account offer -------------------------------------------------- */

.pc-ty-account{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;
margin:28px 0 0;padding:18px 20px;border-radius:var(--pc-radius-lg);
border:1px dashed var(--pc-line)}
.pc-ty-account p{flex:1 1 260px;margin:0;font-size:14px;line-height:1.55;
color:var(--pc-text-2)}
.pc-ty-account strong{display:block;color:var(--pc-ink);font-size:15px}
.pc-ty-account .pc-btn{flex:0 0 auto}

@media (max-width:600px){
	.pc-ty__mark{width:64px;height:64px}
	.pc-ty-pay{padding:16px}
	.pc-ty-pay__meta{grid-template-columns:1fr}
	.pc-ty-pay__copy{width:100%}
	.pc-ty-account .pc-btn{width:100%;justify-content:center}
}

/* ==========================================================================
   8. SamedayCourier — Easybox

   The plugin drops its locker UI in as a sibling of the whole rate list, so
   it lands under the options box rather than inside the option it belongs
   to. It cannot be moved without fighting the plugin's React bookkeeping, so
   it is styled to read as attached to the box above it instead: same width,
   pulled up against it, one shared edge.

   Its own stylesheet gives the button a red gradient and the chosen locker a
   bare bold line. Both are overridden here — the red is nobody's brand on
   this site, and "you have chosen a pickup point" is worth saying with more
   than font-weight.
   ========================================================================== */

.pc-co .sameday-blocks-locker{margin:-1px 0 0;padding:16px;gap:12px;
align-items:stretch;
border:1px solid var(--pc-line);border-radius:0 0 var(--pc-radius) var(--pc-radius);
background:var(--pc-bg)}

/* The chosen locker comes last in the markup and first in the reading order:
   it is the answer, the button is how to change it. */
.pc-co .sameday-blocks-ship-to{order:-1;display:flex;gap:10px;
padding:12px 14px;border-radius:var(--pc-radius);
background:var(--pc-white);box-shadow:inset 0 0 0 1px var(--pc-line);
font-size:14px;font-weight:500;line-height:1.45;color:var(--pc-ink)}
.pc-co .sameday-blocks-ship-to::before{content:"";flex:0 0 18px;width:18px;height:18px;
margin-top:1px;background:var(--pc-magenta);
-webkit-mask:var(--pc-icon-pin) center/contain no-repeat;
mask:var(--pc-icon-pin) center/contain no-repeat}

/* The plugin's red gradient replaced with the theme's own secondary button. */
.pc-co .sameday_select_locker,
.pc-co #select_locker{align-self:flex-start;
padding:12px 20px;border:1.5px solid var(--pc-ink);border-radius:var(--pc-radius);
background:transparent;color:var(--pc-ink);cursor:pointer;
font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.12em;line-height:1;
transition:background-color .15s,color .15s,border-color .15s}
.pc-co .sameday_select_locker:hover,
.pc-co #select_locker:hover{background:var(--pc-ink);color:var(--pc-white);
border-color:var(--pc-ink)}

/* The plugin keeps this in the flow at opacity:0 and fades it in, so it has
   to hold no height until it is actually shown. */
.pc-co #placeOrderError{order:1;display:none;padding:10px 14px;
border-radius:var(--pc-radius);white-space:normal;
background:var(--pc-error-bg,#FDECEC);color:var(--pc-error);
font-size:13px;font-weight:500;line-height:1.45}
.pc-co #placeOrderError.sameday-is-visible{display:block}

/* The dropdown fallback, for shops that run without the map. */
.pc-co .sameday-blocks-locker #shipping-pickup-store-select{max-width:none;
min-height:48px;padding:0 38px 0 14px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);
background:var(--pc-white);font-family:var(--pc-font-body);font-size:16px}

@media (max-width:600px){
	.pc-co .sameday-blocks-locker{padding:14px}
	.pc-co .sameday_select_locker,
	.pc-co #select_locker{align-self:stretch;text-align:center}
}

/* Express checkout with nothing in it. WooPayments registers Apple Pay and
   Google Pay as express methods, and WooCommerce draws the box before it
   knows whether the browser can show either — so a shopper without a wallet
   saw a titled, bordered, empty rectangle above the form. Hidden until a
   button actually lands in it; the separator under it goes with it. */
.wc-block-components-express-payment:has(.wc-block-components-express-payment__event-buttons:empty),
.wc-block-components-express-payment:not(:has(.wc-block-components-express-payment__event-buttons li)),
.wc-block-components-express-payment:not(:has(.wc-block-components-express-payment__event-buttons li)) + .wc-block-components-express-payment-continue-rule{display:none}