/*
   Ramslin — commerce stylesheet.

   Loaded ONLY on WooCommerce pages (inc/enqueue.php, gated by ramslin_is_woo_page()).
   The landing page never downloads it, which is why it is a separate file: style.css
   is the homepage's budget and this would eat it. See REBUILD_PLAN decision 27.

   Tokens come from :root in style.css, which always loads first — this file declares
   none of its own and must never hardcode a colour or a font family.

   SPECIFICITY. Nearly every rule here is prefixed with #main, GeneratePress's stable
   content id, and nine are prefixed with `#content #main`. This is not decoration.
   WooCommerce ships the same declarations at up to (1,4,2) — it uses #content, which
   GeneratePress happens to provide — so a plain `.woocommerce-page …` rule at (0,2,0)
   loses silently and the shop renders in WooCommerce's purple and lilac. Rules written
   to beat it carry a `beats woocommerce…` comment naming the selector they defeat.
   WooCommerce's stylesheets are minified onto one line, so those comments cite
   selectors rather than line numbers.

   Do not "simplify" a #main or #content #main prefix away. Every one of them was added
   because a measured computed style came back wrong without it.

   Conventions otherwise match style.css: numbered banner sections, no !important, and
   no colour outside the tokens.
*/

/* === 01  SHELL ========================================================= */

/* GeneratePress gives .site-main a 20px margin and a bottom margin to every child.
   Commerce pages want the page rhythm instead. */
.woocommerce-page .site-main > * { margin-bottom: 0; }   /* beats main.css:1188 */

.woocommerce-page .entry-header { margin-bottom: 28px; }

.woocommerce-page .entry-title {
  font-family: var(--ramslin-font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ramslin-ink);
}

.woocommerce-page .entry-content > .woocommerce { margin-top: 8px; }

/* Woo's own h2/h3 inside commerce templates: Newsreader, but restrained. */
.woocommerce-page .cart_totals h2,
.woocommerce-page #order_review_heading,
.woocommerce-page .woocommerce-billing-fields h3,
.woocommerce-page .woocommerce-additional-fields h3 {
  font-family: var(--ramslin-font-display);
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ramslin-ink);
  margin-bottom: 18px;
}

/* === 02  NOTICES ===================================================== */

/* Woo positions ::before absolutely at left:1.5em and reserves room with
   padding-left:3.5em. Overriding the padding without handling the icon drops
   the glyph onto the text. Its icon font is off-brand here anyway; the accent
   rule on the left already reads as a status mark. */
#main .woocommerce-message::before,
#main .woocommerce-info::before,
#main .woocommerce-error::before { content: none; display: none; }

/* Colour as well as layout. WooCommerce paints these grey with a 3px lime
   or purple top border; all of it is restated here, on #main, so none of it
   leaks through.
   beats woocommerce.css `.woocommerce-error,.woocommerce-info,.woocommerce-message` */
#main .woocommerce-message,
#main .woocommerce-info,
#main .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ramslin-font-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ramslin-ink);
  background: var(--ramslin-wash);
  border: 1px solid var(--ramslin-line);
  border-left: 3px solid var(--ramslin-accent);
  border-radius: var(--ramslin-radius);
  padding: 15px 20px;
  margin: 0 0 24px;
  list-style: none;
}

#main .woocommerce-error {
  background: var(--ramslin-error-wash);
  border-color: var(--ramslin-error-line);
  border-left-color: var(--ramslin-error);
}

#main .woocommerce-message a:not(.button),
#main .woocommerce-info a:not(.button) { color: var(--ramslin-accent); }

#main .woocommerce-message .button { margin-left: auto; }

/* === 03  BUTTONS ======================================================= */

/* WooCommerce uses .button; the theme's own system is .ramslin-btn. Rather than
   copy markup into template overrides just to change a class, the Woo classes are
   mapped onto the same visual system here. Values mirror style.css block 06. */
#main .button,
#main button.button,
#main input.button,
#main a.button,
#main #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--ramslin-font-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--ramslin-radius);
  border: 1px solid var(--ramslin-line);
  background: transparent;
  color: var(--ramslin-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

#main .button:hover,
#main .button:focus {
  background: var(--ramslin-wash);
  border-color: var(--ramslin-moss);
  color: var(--ramslin-ink);
  text-decoration: none;
}

/* `.alt` is Woo's primary. Colour is restated on :hover/:focus because GeneratePress
   declares a:hover{color:var(--contrast)} at (0,1,1), which outranks a single class —
   the same trap documented in style.css block 06. */
#main .button.alt,
#main .checkout-button,
#main #place_order {
  background: var(--ramslin-accent);
  border-color: var(--ramslin-accent);
  color: #fff;
}

#main .button.alt:hover,
#main .button.alt:focus,
#main .checkout-button:hover,
#main .checkout-button:focus,
#main #place_order:hover,
#main #place_order:focus {
  background: var(--ramslin-accent-dark);
  border-color: var(--ramslin-accent-dark);
  color: #fff;
}

#main .button:disabled,
#main .button[disabled] { opacity: .45; cursor: not-allowed; }

#main .checkout-button,
#main #place_order { width: 100%; padding-block: 18px; }

/* === 04  FORMS ========================================================= */

#main .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
}

#main .form-row label,
#main .woocommerce-form__label {
  font-family: var(--ramslin-font-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ramslin-muted);
}

#main .required { color: var(--ramslin-accent); border: 0; }

#main .input-text,
#main input[type="text"],
#main input[type="email"],
#main input[type="tel"],
#main input[type="password"],
#main select,
#main textarea {
  font-family: var(--ramslin-font-body);
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ramslin-ink);
  background: var(--ramslin-surface);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#main .input-text:focus,
#main select:focus,
#main textarea:focus {
  outline: none;
  border-color: var(--ramslin-accent);
  box-shadow: 0 0 0 3px var(--ramslin-wash-deep);
}

#main textarea { min-height: 110px; resize: vertical; }

#main .form-row-first,
#main .form-row-last { width: 100%; float: none; }

/* Two-up name fields on anything wider than a phone. */
@media (min-width: 641px) {
  #main .woocommerce-billing-fields__field-wrapper,
  #main .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
  #main .form-row-wide { grid-column: 1 / -1; }
}

/* === 05  TABLES ======================================================== */

#main .shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  font-family: var(--ramslin-font-body);
  font-size: .95rem;
}

#main .shop_table th {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ramslin-muted);
  text-align: left;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ramslin-line);
}

#main .shop_table td {
  padding: 18px 0;
  border-top: 1px solid var(--ramslin-line-soft);
  vertical-align: middle;
  color: var(--ramslin-body);
}

#main .shop_table tr:first-child td { border-top: 0; }

#main .woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
  color: var(--ramslin-ink);
}

#main .product-name a { color: var(--ramslin-ink); font-weight: 500; }
#main .product-thumbnail img { width: 64px; height: auto; border-radius: var(--ramslin-radius); }
#main td.product-remove a { color: var(--ramslin-faint); font-size: 1.1rem; text-decoration: none; }
#main td.product-remove a:hover { color: var(--ramslin-accent); }

#main .quantity .qty {
  width: 76px;
  padding: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* === 06  CART ======================================================== */

/* Deliberately stacked, not two columns: reviewed both and this reads better
   for a short cart. The totals card sits right, under the line items. */

/* Woo floats the card at 48% of its container, which is why it rendered as a
   narrow strip. Replaced with a flex row that right-aligns a card of our own
   width. max-width is restated because Woo's rule also sets width.
   beats woocommerce-layout.css `.woocommerce-page .cart-collaterals .cart_totals` */
#main .cart-collaterals {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 36px;
}
#main .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  max-width: 440px;
  background: var(--ramslin-surface);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  padding: 26px 28px 28px;
}


/* beats woocommerce.css `.woocommerce table.shop_table` (border + separate) */
#main table.shop_table.cart,
#main table.shop_table.cart td,
#main table.shop_table.cart th { border: 0; background: none; }

#main table.shop_table.cart {
  display: block;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}

/* The uppercase column headers are the most spreadsheet-like thing here, and
   every cell already carries a data-title for assistive tech. */
#main table.shop_table.cart thead { display: none; }
#main table.shop_table.cart tbody { display: block; }

#main table.shop_table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name  total"
    "thumb price total"
    "thumb qty   remove";
  column-gap: 22px;
  row-gap: 6px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--ramslin-line-soft);
}
#main table.shop_table.cart tr.cart_item:first-child { border-top: 0; padding-top: 6px; }

/* beats woocommerce.css `.woocommerce table.shop_table td` (padding 9/12) */
#main table.shop_table.cart tr.cart_item td { display: block; padding: 0; border: 0; }

#main td.product-thumbnail { grid-area: thumb; }
#main td.product-name      { grid-area: name; }
#main td.product-price     { grid-area: price; }
#main td.product-quantity  { grid-area: qty; }
#main td.product-subtotal  { grid-area: total; justify-self: end; }
#main td.product-remove    { grid-area: remove; justify-self: end; }

#main td.product-thumbnail img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--ramslin-radius);
  background: var(--ramslin-wash);
}

#main td.product-name a {
  font-family: var(--ramslin-font-body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ramslin-ink);
  text-decoration: none;
}
#main td.product-name a:hover { color: var(--ramslin-accent); }

#main td.product-price { font-size: .9rem; color: var(--ramslin-muted); }

#main td.product-subtotal {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ramslin-ink);
  font-variant-numeric: tabular-nums;
}

#main td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ramslin-faint);
  text-decoration: none;
  border-radius: 50%;
  transition: color .18s ease, background-color .18s ease;
}
#main td.product-remove a.remove:hover { color: var(--ramslin-error); background: var(--ramslin-error-wash); }

#main td.product-quantity .quantity { display: inline-flex; }
#main td.product-quantity .qty { width: 72px; padding: 8px 10px; text-align: center; font-variant-numeric: tabular-nums; }

#main table.shop_table.cart tr:not(.cart_item) { display: block; }
/* These three carry #content as well as #main. WooCommerce ships the actions
   cell with a SECOND, id-bearing variant of each selector —
     .woocommerce #content table.cart td.actions            (1,3,2) text-align:right
     .woocommerce #content table.cart td.actions .coupon    (1,4,2) float:left
     .woocommerce #content table.cart td.actions .input-text(1,4,2) width:80px
   — and GeneratePress happens to provide #content, so those variants match and
   out-rank a single-id rule. The float is what shrink-wrapped the coupon group,
   and the 80px is what kept the field stuck at placeholder-clipping width.
   beats woocommerce-layout.css `.woocommerce #content table.cart td.actions …` */
#content #main table.shop_table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 24px 0 0;
  border-top: 1px solid var(--ramslin-line);
}
#content #main td.actions .coupon {
  display: flex;
  gap: 10px;
  float: none;
  flex: 1 1 auto;
  max-width: 520px;
}
#content #main td.actions .coupon .input-text {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}


#main .cart_totals h2 { margin-bottom: 16px; }

/* beats woocommerce.css `.woocommerce table.shop_table` and
   `.woocommerce-cart .cart-collaterals .cart_totals table th { width:35% }` */
#main .cart_totals table.shop_table,
#main .cart_totals table.shop_table th,
#main .cart_totals table.shop_table td { border: 0; background: none; }

#main .cart_totals table.shop_table { border-collapse: collapse; margin: 0; width: 100%; }

#main .cart_totals table.shop_table th,
#main .cart_totals table.shop_table td {
  padding: 13px 0;
  font-size: .95rem;
  line-height: 1.45;
  vertical-align: top;
}

#main .cart_totals table.shop_table th {
  width: 42%;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ramslin-muted);
  text-align: left;
}

#main .cart_totals table.shop_table td { text-align: right; color: var(--ramslin-ink); }

#main .cart_totals table.shop_table tr:not(:first-child) th,
#main .cart_totals table.shop_table tr:not(:first-child) td { border-top: 1px solid var(--ramslin-line-soft); }

#main .cart_totals table.shop_table tr.order-total th,
#main .cart_totals table.shop_table tr.order-total td {
  border-top: 1px solid var(--ramslin-line);
  padding-top: 16px;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ramslin-ink);
}

/* Shipping cannot stay a right-aligned cell in a 380px column — the radio
   labels and the "Dostava u …" line overflow. Stack it: label above, options
   full width beneath. */
#main .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
#main .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  display: block;
  width: auto;
  text-align: left;
}
#main .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  padding-top: 6px;
  padding-bottom: 14px;
  border-top: 0;
}

#main .cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: left; }
#main .cart_totals ul#shipping_method li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  font-size: .93rem;
}
#main .cart_totals ul#shipping_method li input { flex: none; margin: 0; }
/* beats woocommerce.css `.woocommerce ul#shipping_method li label { display:inline }` */
#main .cart_totals ul#shipping_method li label { display: block; margin: 0; cursor: pointer; color: var(--ramslin-body); }
#main .cart_totals ul#shipping_method li .woocommerce-Price-amount { font-weight: 500; }

#main .cart_totals .woocommerce-shipping-destination { font-size: .86rem; color: var(--ramslin-muted); margin-top: 8px; line-height: 1.45; }
#main .cart_totals .shipping-calculator-button { font-size: .86rem; color: var(--ramslin-accent); }
#main .cart_totals .shipping-calculator-form { margin-top: 10px; }

#main .wc-proceed-to-checkout { margin-top: 22px; padding: 0; }
#main .wc-proceed-to-checkout .checkout-button { width: 100%; }


/* === 07  CHECKOUT ====================================================== */

/* Two columns: details on the left, the order and payment on the right, which is
   where a buyer expects the total to stay in view. #customer_details spans both
   rows so the heading and review stack in the right-hand column. */
@media (min-width: 901px) {
  .woocommerce-checkout #main form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    column-gap: 52px;
    align-items: start;
  }
  .woocommerce-checkout #main form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout #main form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout #main form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--ramslin-header-h) + 20px); }
}

.woocommerce-checkout #main .col2-set .col-1,
.woocommerce-checkout #main .col2-set .col-2 { width: 100%; float: none; }

.woocommerce-checkout #main .col2-set .col-2 { margin-top: 28px; }

.woocommerce-checkout #main #order_review {
  background: var(--ramslin-surface);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  padding: 24px 26px 26px;
}

.woocommerce-checkout #main .woocommerce-checkout-review-order-table th { text-transform: none; font-size: .88rem; letter-spacing: 0; }
.woocommerce-checkout #main .woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout #main .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout #main .woocommerce-checkout-review-order-table .order-total td {
  border-top: 1px solid var(--ramslin-line);
  font-size: 1.1rem;
  color: var(--ramslin-ink);
}

/* Payment methods. They sit on the order review's white panel: WooCommerce tints the
   whole area with its own purple, rgba(129,110,153,.14), and pads the terms and the
   order button 1em in from the edges of that tint. Both go, so the list, the terms and
   the button share one left edge. The selected method's description keeps the wash
   tint (.payment_box below), and its pointer is recoloured from WooCommerce's lilac
   #DCD7E2 to match it. */
.woocommerce-checkout #main #payment {
  margin-top: 22px;
  background: transparent;     /* beats woocommerce.css `.woocommerce-checkout #payment` */
  border-radius: 0;
}
.woocommerce-checkout #main #payment .place-order { padding: 18px 0 0; }   /* beats woocommerce.css `#payment div.form-row` */
.woocommerce-checkout #main #payment .payment_box::before { border-bottom-color: var(--ramslin-wash); }   /* beats woocommerce.css `.woocommerce-checkout #payment div.payment_box::before` */

.woocommerce-checkout #main #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-bottom: 1px solid var(--ramslin-line-soft);
}

.woocommerce-checkout #main #payment ul.payment_methods li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ramslin-line-soft);
}
.woocommerce-checkout #main #payment ul.payment_methods li:last-child { border-bottom: 0; }

.woocommerce-checkout #main #payment ul.payment_methods label {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ramslin-ink);
  letter-spacing: 0;
  cursor: pointer;
}

.woocommerce-checkout #main #payment .payment_box {
  background: var(--ramslin-wash);
  border-radius: var(--ramslin-radius);
  padding: 12px 14px;
  margin-top: 10px;
  font-size: .9rem;
  color: var(--ramslin-body);
}
.woocommerce-checkout #main #payment .payment_box p:last-child { margin-bottom: 0; }

.woocommerce-checkout #main .woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; }
.woocommerce-checkout #main .woocommerce-privacy-policy-text p { font-size: .85rem; color: var(--ramslin-muted); }

.woocommerce-checkout #main .form-row.validate-required.woocommerce-invalid .input-text { border-color: var(--ramslin-error); }

/* === 09  PRODUCT · LAYOUT ============================================== */

/* Woo floats the gallery and the summary at 48% each with a 2% gutter. Replace both
   floats with one grid so the two columns can have different widths and the summary
   can be the wider of the two — on a single-product store the decision lives in the
   right column, not the photograph. */
#content #main div.product {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
}
/* beats woocommerce.css `.woocommerce #content div.product div.images` (float:left;width:48%) */
#content #main div.product div.images,
#content #main div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}

/* The breadcrumb is Woo's, rendered above .product by the single-product template.
   It is a grid child of nothing — it sits outside div.product — so it is styled on
   its own. */
#main .woocommerce-breadcrumb {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ramslin-faint);
  margin: 0 0 22px;
}
#main .woocommerce-breadcrumb a { color: var(--ramslin-muted); text-decoration: none; }
#main .woocommerce-breadcrumb a:hover { color: var(--ramslin-accent); text-decoration: underline; }

/* === 10  PRODUCT · GALLERY ============================================= */

/* One photograph, no gallery. wc-product-gallery-{zoom,lightbox,slider} are all
   removed in inc/woocommerce.php, which takes PhotoSwipe, flexslider and the zoom
   script off the page with them, so none of Woo's gallery chrome needs styling —
   only the plate the image sits on.

   WHY THE PLATE IS A SEPARATE ELEMENT INSIDE div.images.
   The obvious version puts `position:sticky` straight on div.images. It scrolls the
   plate down over the Opis section. A sticky box is trapped by its containing block,
   and div.images is a grid item of div.product — a grid that also holds the
   description row. Browsers disagree about whether a grid item's containing block is
   its own grid *area* or the whole grid container, and when it is the container the
   plate is free to travel the full height of the product, description included.

   So the sticky element is given a parent with a real, measurable height instead.
   div.images keeps `align-self: stretch` (it is the only grid item that does), which
   makes it exactly as tall as the gallery/summary row. The plate sticks inside that,
   and stops at the row's bottom edge — just above the hairline — in every browser,
   because the constraint no longer depends on how grid areas are interpreted.

   The extra wrapper is added in woocommerce/single-product/product-image.php. */
#content #main div.product div.images {
  align-self: stretch;
  background: none;
  border: 0;
  padding: 0;
}

#main .ramslin-plate {
  position: sticky;
  top: calc(var(--ramslin-header-h) + 24px);
  background: var(--ramslin-wash);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  padding: clamp(22px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* beats woocommerce.css `.woocommerce div.product div.images img` (display:block;width:100%) */
#content #main div.product div.images .ramslin-plate img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  box-shadow: none;
}
/* Woo fades the gallery in from opacity:0 with its own JS. With the slider support
   removed that JS never runs, so the inline opacity:0 would stick and the image would
   never appear. The template override drops the inline style; this is the belt to
   that braces. */
#content #main div.product div.images.woocommerce-product-gallery { opacity: 1; }

/* === 11  PRODUCT · SUMMARY ============================================= */

#content #main div.product .product_title {
  font-family: var(--ramslin-font-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--ramslin-ink);
  margin: 0 0 16px;
}

/* The short description is the lede, so it reads at lede size and colour rather than
   as body copy. */
#main .woocommerce-product-details__short-description {
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--ramslin-muted);
  max-width: 46ch;
  margin: 0 0 26px;
}
#main .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* The headline price. Before a size is picked this is Woo's range (13,00 € – 43,50 €);
   after, wc-add-to-cart-variation.js replaces .single_variation's contents and the
   range is hidden by the rule in block 12. */
/* beats woocommerce.css `.woocommerce div.product p.price` (color:#77a464;font-size:1.25em) */
#content #main div.product p.price {
  font-family: var(--ramslin-font-body);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ramslin-ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 4px;
}
#content #main div.product p.price del { color: var(--ramslin-faint); font-weight: 400; }
#content #main div.product p.price ins { text-decoration: none; }

/* SKU is "N/A" — this shop does not use them — and the category is "Uncategorized"
   until a real taxonomy exists. Neither belongs on a one-product page. Hidden here
   rather than unhooked so that assigning a real category later only needs this rule
   relaxed, not a hook restored. */
#main .product_meta { display: none; }

/* === 12  PRODUCT · SIZE CARDS ========================================== */

/* The four bottle sizes are the whole decision, and the homepage already presents
   them as a price grid. A <select> labelled "Odaberi opciju" throws that away: it
   hides three of the four prices behind a click and shows no € / ml at all.
   So the same four cells reappear here as radio cards.
   Compare style.css block 10 — this is deliberately the same object at a smaller size.

   HOW IT STAYS COMPATIBLE WITH WOOCOMMERCE. wc-add-to-cart-variation.js binds to
   `change` on `.variations select` and reads the select's value; radios are invisible
   to it. So Woo's real <select> stays in the DOM, and assets/js/product.js mirrors the
   checked radio onto it and dispatches `change`. Woo's JS cannot tell the difference.

   NO-JS IS NOT A BLANK PAGE. The cards are hidden and the <select> is visible until
   product.js adds `.ramslin-pick--ready` to the wrapper. With JS off the page degrades
   to exactly the stock Woo control, which works. */

#main .ramslin-pick { margin: 26px 0 0; }

#main .ramslin-pick__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ramslin-moss);
  margin: 0 0 12px;
}

#main .ramslin-pick__grid { display: none; }
#main .ramslin-pick--ready .ramslin-pick__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Woo's own table.variations is the fallback control. It is not display:none when
   JS is off — it is the real UI then. */
#main .ramslin-pick--ready table.variations,
#main .ramslin-pick--ready .reset_variations { display: none; }

#main .ramslin-pick__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 16px 15px;
  background: var(--ramslin-surface);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
#main .ramslin-pick__card:hover { border-color: var(--ramslin-moss); }

/* The radio itself is the accessible control and must stay focusable, so it is
   clipped rather than display:none. */
#main .ramslin-pick__card input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  border: 0; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#main .ramslin-pick__vol {
  font-family: var(--ramslin-font-display);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ramslin-ink);
}
#main .ramslin-pick__price {
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ramslin-ink);
  font-variant-numeric: tabular-nums;
}
#main .ramslin-pick__unit {
  font-size: .76rem;
  color: var(--ramslin-muted);
  font-variant-numeric: tabular-nums;
}

/* Selected takes the night ground — the same single tie-back the homepage's popular
   cell uses, reused here for a different state. On the homepage one cell is always
   dark; here none is until the buyer chooses. */
#main .ramslin-pick__card:has(input:checked) {
  background: var(--ramslin-night);
  border-color: var(--ramslin-night);
}
#main .ramslin-pick__card:has(input:checked) .ramslin-pick__vol,
#main .ramslin-pick__card:has(input:checked) .ramslin-pick__price { color: var(--ramslin-night-text); }
#main .ramslin-pick__card:has(input:checked) .ramslin-pick__unit { color: var(--ramslin-night-dim); }

/* wc_price() wraps every figure in <span class="woocommerce-Price-amount">, and block
   05 colours that span directly: `#main .woocommerce-Price-amount { color: ink }`.
   A direct match beats an inherited value whatever the specificity, so colouring
   .ramslin-pick__price above does NOT reach the digits inside it — on the night card
   the price rendered #343E3D on #141917, a contrast of 1.63:1 against AA's 4.5:1.
   Raising the specificity of the parent rule would not have helped; the inner element
   has to be targeted.

   `inherit` rather than a token so one rule serves both states: night-text inside a
   selected card, ink inside an unselected one, nothing to keep in sync. It also
   levels the unit line, where the figure was ink and the words after it were muted. */
#main .ramslin-pick__price .woocommerce-Price-amount,
#main .ramslin-pick__unit .woocommerce-Price-amount { color: inherit; }

/* Keyboard focus. The radio is clipped, so the ring has to be drawn on the card. */
#main .ramslin-pick__card:has(input:focus-visible) {
  outline: 2px solid var(--ramslin-accent);
  outline-offset: 2px;
}

#main .ramslin-pick__tag {
  position: absolute;
  top: -1px; right: -1px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1E2A24;
  background: var(--ramslin-sage);
  padding: 3px 8px;
  border-radius: 0 var(--ramslin-radius) 0 var(--ramslin-radius);
}

/* Once a size is chosen the variation price appears inside .single_variation and the
   range above it is wrong, so it goes. The test has to climb to div.product and come
   back down: p.price PRECEDES the form in Woo's markup, so no sibling combinator can
   reach it from the checked radio. */
#content #main div.product:has(.ramslin-pick input:checked) > .summary > p.price { display: none; }

/* Woo's own variation panel: price, availability, description. The price inside it is
   the live one, so it takes the headline size the range gave up. */
#main .woocommerce-variation.single_variation { margin: 20px 0 0; }
#content #main div.product .woocommerce-variation-price .price {
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ramslin-ink);
  font-variant-numeric: tabular-nums;
}

/* === 13  PRODUCT · ADD TO CART + REASSURANCE =========================== */

#main .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 18px 0 0;
}
/* beats woocommerce.css `.woocommerce div.product form.cart .button` (float:left) */
#content #main div.product form.cart .single_add_to_cart_button {
  float: none;
  flex: 1 1 auto;
  padding-block: 18px;
}
/* beats woocommerce.css `.woocommerce div.product form.cart div.quantity` (float:left) */
#content #main div.product form.cart div.quantity { float: none; margin: 0; }
#main .woocommerce-variation-add-to-cart .quantity .qty { height: 100%; width: 84px; }

/* Woo disables the button until a variation is chosen, by adding .disabled as well as
   the attribute. commerce.css block 03 already dims [disabled]; this catches the class. */
#main .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }

/* Three lines of reassurance directly under the button, where the hesitation is.
   Shipping figures match the seed (flat 5,00 €, free over 50,01 €) — REBUILD_PLAN,
   settled defaults. They are marketing copy in the partial, not read from the
   shipping zone, so a rate change has to be mirrored here by hand. */
#main .ramslin-pdp-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ramslin-line);
  display: grid;
  gap: 9px;
}
#main .ramslin-pdp-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ramslin-body);
  margin: 0;
}
#main .ramslin-pdp-trust svg {
  flex: none;
  width: 14px; height: 14px;
  margin-top: 4px;
  color: var(--ramslin-accent);
}

/* === 14  PRODUCT · DESCRIPTION ========================================= */

/* Woo's tabs are replaced by stacked sections. Two reasons, in order: the tab strip
   needs woocommerce.js (and therefore jQuery) to do anything, and on a two-tab page
   it hides half the copy behind a click for no gain. Stacked, both panels are
   readable and indexable, and the tab script comes off the page.
   The override is woocommerce/single-product/tabs/tabs.php. */
#main .ramslin-pdp-info {
  /* div.product is the grid from block 09; this is its third child and spans both
     columns. Stated here rather than inline so the override template stays markup. */
  grid-column: 1 / -1;
  margin: clamp(56px, 7vw, 92px) 0 0;
  padding: clamp(36px, 5vw, 54px) 0 0;
  border-top: 1px solid var(--ramslin-line);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

#main .ramslin-pdp-info h2 {
  font-family: var(--ramslin-font-display);
  font-weight: 300;
  font-size: 1.65rem;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ramslin-ink);
  margin: 0 0 16px;
}
#main .ramslin-pdp-info p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ramslin-body);
  max-width: 62ch;
}
#main .ramslin-pdp-info p:last-child { margin-bottom: 0; }

/* The attributes table, which Woo renders as shop_attributes. commerce.css block 05
   already handles table chrome; this is the panel it sits in. */
#main .ramslin-pdp-specs {
  background: var(--ramslin-wash);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  padding: 26px 26px 10px;
}
#main .ramslin-pdp-specs h2 { font-size: 1.3rem; margin-bottom: 14px; }
#main .ramslin-pdp-specs dl { margin: 0; display: grid; gap: 0; }
#main .ramslin-pdp-specs dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ramslin-moss);
  margin: 0;
}
#main .ramslin-pdp-specs dd {
  margin: 4px 0 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ramslin-line-soft);
  font-size: .94rem;
  color: var(--ramslin-body);
}
#main .ramslin-pdp-specs dd + dt { margin-top: 14px; }
#main .ramslin-pdp-specs dd:last-of-type { border-bottom: 0; }

/* Woo renders "Povezani proizvodi" below the tabs. One product, so there is never
   anything to relate — the hook is removed in inc/woocommerce.php. This is the
   second belt, in case a second product is ever added without a design for it. */
#main .related.products,
#main .upsells.products { display: none; }

/* === 15  ACCOUNT · LOGIN =============================================== */

/* Ramslin has no customer accounts — the footer link was removed in packet 39 and
   registration is off everywhere. This page exists because WooCommerce requires
   woocommerce_myaccount_page_id assigned and because the shop owner logs in through
   it, so it only has to be correct, not persuasive.

   Only the LOGGED-OUT login form is styled. The dashboard, orders, addresses and
   edit-account views behind it are reachable by the owner alone, who has wp-admin —
   styling them would be work for an audience of one with a better tool available. */

/* .woocommerce-account is a BODY class, so it goes before the id, not after it:
   `#main .woocommerce-account` matches nothing at all. */
.woocommerce-account #main .woocommerce { max-width: 440px; margin-inline: auto; }
.woocommerce-account #main .entry-title { text-align: center; margin-bottom: 8px; }

.woocommerce-account #main h2 {
  font-family: var(--ramslin-font-display);
  font-weight: 300;
  font-size: 1.35rem;
  color: var(--ramslin-ink);
  text-align: center;
  margin: 0 0 22px;
}

/* A two-field form has no business spanning 1140px. */
#content #main form.woocommerce-form-login {
  background: var(--ramslin-surface);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  padding: clamp(24px, 4vw, 34px);
  margin: 0;
}

/* The only action on the page, so it takes the primary treatment. Woo gives the
   submit `woocommerce-button button woocommerce-form-login__submit` with no `.alt`,
   so block 03 would otherwise render it as a ghost button.
   #content #main is (2,1,0) and is what this needs: block 03's own
   `#main button.button` is (1,1,1), so a plain `#main .woocommerce-form-login__submit`
   at (1,1,0) loses to it however late it appears in the file. */
#content #main .woocommerce-form-login__submit {
  width: 100%;
  background: var(--ramslin-accent);
  border-color: var(--ramslin-accent);
  color: #fff;
  margin-top: 4px;
}
#content #main .woocommerce-form-login__submit:hover,
#content #main .woocommerce-form-login__submit:focus {
  background: var(--ramslin-accent-dark);
  border-color: var(--ramslin-accent-dark);
  color: #fff;
}

#main .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--ramslin-muted);
  margin: 0 0 18px;
}

#main .woocommerce-LostPassword { text-align: center; margin: 16px 0 0; font-size: .88rem; }

/* No breakpoint of its own. Measured at 390px and 360px: the card sits inside the
   container's gutters at 330px and 300px with no horizontal scroll, so block 08 has
   nothing to add. */

/* === 16  CHECKOUT · R1 ================================================== */

/* The R1 (company invoice) fields come from the ramslin-hub3 plugin, rendered after the
   billing form as .ramslin-r1 > the checkbox + .ramslin-r1__fields. The plugin validates
   and saves them only when the box is ticked, so here they stay hidden until it is.
   Pure CSS through :has() — no script. A browser without :has() leaves them visible,
   which still works. */
.woocommerce-checkout #main .ramslin-r1 { margin-top: 4px; }

/* WooCommerce appends "(neobvezno)" to every non-required field, this checkbox included.
   On a yes/no choice it is noise. */
.woocommerce-checkout #main .ramslin-r1__toggle .optional { display: none; }

.woocommerce-checkout #main .ramslin-r1__fields { display: none; }

/* Open: one wash-tinted panel, so the four fields read as a group belonging to the box. */
.woocommerce-checkout #main .ramslin-r1:has(#ramslin_r1:checked) .ramslin-r1__fields {
  display: block;
  background: var(--ramslin-wash);
  border-radius: var(--ramslin-radius);
  padding: 18px 18px 0;
  margin: 0 0 18px;
}

/* === 08  RESPONSIVE ================================================== */

@media (max-width: 900px) {
  #main .cart-collaterals { justify-content: stretch; margin-top: 28px; }
  #main .cart-collaterals .cart_totals { max-width: none; }
  .woocommerce-checkout #order_review { margin-top: 28px; }

  /* One column. The photograph stops being sticky — on a phone a sticky plate eats
     the viewport the buyer needs for the cards. */
  #content #main div.product { grid-template-columns: 1fr; gap: 28px; }
  #main .ramslin-plate { position: static; aspect-ratio: 3 / 2; }
  #main .ramslin-pdp-info { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .woocommerce-page .entry-header { margin-bottom: 20px; }

  /* Still a grid — only the shape changes. An earlier revision reset tr and td
     to display:block here, which silently undid the card layout below 640px. */
  #main table.shop_table.cart tr.cart_item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name   remove"
      "thumb price  price"
      "thumb qty    total";
    column-gap: 14px;
    row-gap: 8px;
    padding: 20px 0;
  }
  #main td.product-thumbnail img { width: 64px; height: 64px; }
  #main td.product-price { font-size: .86rem; }
  #main td.product-subtotal { font-size: 1rem; }

  /* Block layout, not flex: the field, its button and the update button are
     each full width, and no flex basis can shrink-wrap them. */
  #content #main table.shop_table.cart td.actions { display: block; }
  #content #main td.actions .coupon { display: block; float: none; max-width: none; }
  #content #main td.actions .coupon .input-text,
  #content #main td.actions .coupon .button,
  #content #main table.shop_table.cart td.actions > .button {
    display: block;
    width: 100%;
    margin: 0 0 10px;
  }
  #content #main table.shop_table.cart td.actions > .button:last-child { margin-bottom: 0; }
  #main .wc-proceed-to-checkout .checkout-button,
  #main #place_order { width: 100%; }

  #main .cart-collaterals .cart_totals { padding: 22px 20px 24px; }

  #content #main div.product .product_title { font-size: 2.05rem; }

  /* Two cards per row still fits at 360px — measured: 155px cards, no wrapping in the
     volume, price or unit line — and keeping the 2×2 block means all four prices stay
     visible at once, which is the entire point of the grid. */
  #main .ramslin-pick__card { padding: 13px 12px 12px; }
  #main .ramslin-pick__price { font-size: 1.18rem; }
  #main .ramslin-pick__unit { font-size: .72rem; }

  /* The badge cannot stay a corner overlay down here. "NAJPOPULARNIJE" is 14 uppercase
     characters with 0.12em tracking, which is wider than a 155px card — at 360px it
     overflowed the card and printed across "50 ml". In flow it is just the card's
     first line, and the tracking comes in to buy the width back. */
  #main .ramslin-pick__tag {
    position: static;
    align-self: flex-start;
    margin: 0 0 3px;
    padding: 2px 6px;
    font-size: .53rem;
    letter-spacing: .08em;
    border-radius: 2px;
  }

  /* The add-to-cart row wraps: quantity on its own line above a full-width button.
     Side by side, the button loses to the 84px quantity field and the primary action
     ends up the smaller of the two. */
  #main .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
  #main .woocommerce-variation-add-to-cart .quantity { flex: 1 1 100%; }
  #main .woocommerce-variation-add-to-cart .quantity .qty { width: 100%; }
  #content #main div.product form.cart .single_add_to_cart_button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #main .ramslin-pick__card { transition: none; }
}