/*
Theme Name:   Panini Kosova
Theme URI:    https://panini-kosova.com
Description:  Storefront child theme for Panini Kosova. Layout and visual system
              modelled on the Panini UK storefront: grey promo bar, white header
              with centred search, uppercase navy navigation, bordered product
              cards with yellow call-to-action buttons, and dark navy section
              bands. All CSS is original; no vendor stylesheets or artwork reused.
Author:       Panini Kosova
Template:     storefront
Version:      1.0.0
Text Domain:  panini-kosova
*/

:root {
  --pk-yellow:      #ffe500;
  --pk-yellow-dark: #f5d400;
  --pk-navy:        #0d3348;
  --pk-navy-deep:   #092536;
  --pk-ink:         #231f20;
  --pk-muted:       #4e515e;
  --pk-bar:         #eaeaea;
  --pk-border:      #e2e3e3;
}

body,
button, input, select, textarea,
.site-title, h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pk-ink);
}
body { background: #fff; }

/* ---------- header ---------- */
.site-header {
  background: #fff !important;
  border-bottom: 1px solid var(--pk-border);
  padding-top: 1.4em; padding-bottom: 1.4em;
}
.site-header .site-branding { margin-bottom: 0; }
.site-header .site-title a {
  color: var(--pk-navy) !important;
  font-weight: 800; letter-spacing: -.5px; text-decoration: none;
}
.site-header .site-title a::after {
  content: ""; display: block; height: 5px; width: 100%;
  background: var(--pk-yellow); border-radius: 2px; margin-top: .25em;
}
.site-header .site-description { color: var(--pk-muted); }
.site-search .widget_product_search form { margin-bottom: 0; }
.site-header .site-search input[type="search"] {
  border: 2px solid var(--pk-border); border-radius: 4px;
  padding: .85em 1em; font-size: .95em; background: #fff;
}

/* ---------- navigation ---------- */
.storefront-primary-navigation,
.main-navigation { background: #fff !important; }
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  color: var(--pk-navy) !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .86em;
  letter-spacing: .3px;
  padding: 1.15em .95em;
}
.main-navigation ul.menu > li > a:hover { color: var(--pk-ink) !important; }
.main-navigation ul.menu > li.current-menu-item > a {
  box-shadow: inset 0 -4px 0 var(--pk-yellow);
}
.main-navigation ul li ul { border-top: 3px solid var(--pk-yellow); }
@media (min-width: 768px) {
  .main-navigation ul.menu, .main-navigation ul.nav-menu { text-align: center; }
  .main-navigation ul.menu > li { float: none; display: inline-block; }
}
.site-header-cart .cart-contents { color: var(--pk-navy) !important; font-weight: 600; }

/* ---------- buttons: the signature yellow CTA ---------- */
button, input[type="submit"],
.button, .added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--pk-yellow) !important;
  color: var(--pk-ink) !important;
  border: 0; border-radius: 3px;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; font-size: .84em;
  padding: .95em 1.5em;
  text-decoration: none !important;
  transition: background .15s ease;
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background: var(--pk-yellow-dark) !important;
  color: var(--pk-ink) !important;
}

/* ---------- product cards ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff;
  border: 1px solid var(--pk-border);
  padding: 1.2em 1em 1.4em;
  text-align: center;
  transition: box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 6px 18px rgba(13,51,72,.12); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .98em; font-weight: 700; color: var(--pk-navy);
  line-height: 1.35; padding: .6em 0 .2em;
}
.woocommerce ul.products li.product .price {
  color: var(--pk-ink) !important; font-weight: 700; font-size: 1.05em;
  display: block; margin-bottom: .9em;
}
.woocommerce ul.products li.product img { margin-bottom: .4em; }
.woocommerce ul.products li.product .button { display: block; width: 100%; }
.woocommerce span.onsale {
  background: #c8102e; color: #fff; border-radius: 2px;
  font-weight: 700; text-transform: uppercase; font-size: .72em;
}

/* ---------- homepage composition ---------- */
.home .entry-title, .home .page-title { display: none; }
.home .site-main > .type-page > .entry-content { margin-bottom: 0; }

.pk-hero {
  background: linear-gradient(118deg, var(--pk-navy) 0%, #15506e 58%, #1d6b91 100%);
  color: #fff; padding: 4.6em 2em; text-align: center; margin-bottom: 0;
  position: relative; overflow: hidden;
}
.pk-hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background: var(--pk-yellow);
}
.pk-hero h1 { color:#fff; font-size: 2.7em; line-height:1.12; margin:0 0 .35em; font-weight:800; }
.pk-hero p  { color:#cfe0ea; font-size:1.1em; max-width:36em; margin:0 auto 1.7em; }

.pk-usp { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-bottom:1px solid var(--pk-border); }
.pk-usp > div { padding:1.5em 1.4em; text-align:center; border-right:1px solid var(--pk-border); }
.pk-usp > div:last-child { border-right:0; }
.pk-usp strong { display:block; color:var(--pk-navy); font-size:1em; margin-bottom:.25em; text-transform:uppercase; letter-spacing:.3px; font-size:.86em; }
.pk-usp span  { color:var(--pk-muted); font-size:.88em; line-height:1.5; }

.pk-shelf { padding: 3em 0 1em; }
.pk-shelf__head {
  text-align:center; margin-bottom:1.6em;
}
.pk-shelf__head h2 {
  display:inline-block; font-size:1.5em; font-weight:800; color:var(--pk-navy);
  text-transform:uppercase; letter-spacing:.4px; margin:0;
  border-bottom:5px solid var(--pk-yellow); padding-bottom:.25em;
}

.pk-band { background:var(--pk-navy); color:#fff; padding:3em 2em; text-align:center; margin:3em 0; }
.pk-band h2 { color:#fff; font-size:1.7em; font-weight:800; margin-bottom:.45em; }
.pk-band p  { color:#cfe0ea; max-width:40em; margin:0 auto 1.4em; }

.pk-tiles { display:grid; grid-template-columns:1fr 1fr; gap:1.5em; margin:0 0 3em; }
.pk-tile {
  border:1px solid var(--pk-border); border-top:5px solid var(--pk-yellow);
  padding:2em 1.8em; text-align:center;
}
.pk-tile h3 { color:var(--pk-navy); font-weight:800; text-transform:uppercase; font-size:1.05em; letter-spacing:.3px; margin-bottom:.45em; }
.pk-tile p  { color:var(--pk-muted); font-size:.93em; line-height:1.55; margin:0; }

/* ---------- footer ---------- */
.site-footer { background: var(--pk-navy) !important; color:#cfe0ea !important; }
.site-footer a { color:#fff !important; }
.site-footer h2, .site-footer h3, .site-footer .widget-title { color:#fff !important; }
.site-footer::before {
  content:""; display:block; height:5px; background:var(--pk-yellow);
  margin:-2.2em -99em 2.2em; 
}

@media (max-width: 767px) {
  .pk-hero { padding:3em 1.2em; }
  .pk-hero h1 { font-size:1.9em; }
  .pk-usp, .pk-tiles { grid-template-columns:1fr; }
  .pk-usp > div { border-right:0; border-bottom:1px solid var(--pk-border); }
}

/* ---------- card grid: equal heights, CTAs on a common baseline ----------
   Storefront floats product list items, so rows go ragged as soon as one
   title wraps to a second line. Flex the row and push the button down. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
  margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product > a:first-of-type { display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { flex: 1 1 auto; }
.woocommerce ul.products li.product .button { margin-top: auto; }
/* uniform product imagery regardless of source aspect ratio */
.woocommerce ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}
@media (max-width: 991px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 567px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } }

/* ---------- header search: wide and central, as on the reference ---------- */
@media (min-width: 768px) {
  .site-header .site-search { width: 46%; float: right; margin: .2em 0 0; clear: none; }
  .site-header .site-branding { width: 32%; }
}
.site-header .site-search input[type="search"] { width: 100%; }
.site-header .site-search .search-field { font-size: .95em; }

/* ---------- hero carousel ----------
   Full-bleed strip above the content, matching the reference storefront's
   1920x500 banner slot. A 3.84:1 crop is unreadable on a phone, so slides
   swap to a squarer image under 768px via <picture>. */
.pk-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 0 2.5em;
  background: var(--pk-navy);
  outline: none;
}
.pk-carousel__track {
  display: flex;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .pk-carousel__track { transition: none; }
}
.pk-slide { flex: 0 0 100%; min-width: 100%; }
.pk-slide img { display: block; width: 100%; height: auto; }
.pk-slide__link { display: block; text-decoration: none !important; border: 0 !important; }

.pk-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.82) !important;
  color: var(--pk-navy) !important;
  font-size: 30px; line-height: 1; padding: 0 !important;
  border-radius: 3px; opacity: .9;
  display: flex; align-items: center; justify-content: center;
}
.pk-carousel__arrow:hover { background: #fff !important; opacity: 1; }
.pk-carousel__arrow--prev { left: 14px; }
.pk-carousel__arrow--next { right: 14px; }

.pk-carousel__dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 9px;
}
.pk-carousel__dot {
  width: 30px; height: 5px; padding: 0 !important; border: 0; border-radius: 3px;
  background: rgba(255,255,255,.5) !important; cursor: pointer;
}
.pk-carousel__dot.is-active { background: var(--pk-yellow) !important; }

@media (max-width: 767px) {
  .pk-carousel { margin-bottom: 1.6em; }
  .pk-carousel__arrow { width: 34px; height: 50px; font-size: 24px; }
  .pk-carousel__arrow--prev { left: 6px; }
  .pk-carousel__arrow--next { right: 6px; }
  .pk-carousel__dot { width: 22px; }
}

/* ---------- brand logo ----------
   The reference storefront places the logo top-left of a white header, about
   210px wide. Storefront's default is a text site-title, so the wordmark
   styling that stood in for it is retired here. */
.site-header .custom-logo-link { display: inline-block; max-width: 212px; }
.site-header .custom-logo-link img,
.site-header .custom-logo {
  max-width: 212px; width: 212px; height: auto; display: block;
}
/* the yellow underline belonged to the text wordmark, not the real logo */
.site-header .custom-logo-link + .site-title,
.site-header.has-logo .site-title a::after { display: none; }
.site-header .site-title a::after { content: none; }
.site-header .site-branding .site-title,
.site-header .site-branding .site-description {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .site-header .custom-logo-link,
  .site-header .custom-logo-link img { max-width: 160px; width: 160px; }
}

/* ---------- hero: full bleed ----------
   Storefront wraps content in .col-full with a max width; the reference
   storefront runs its banner edge to edge. Break out of the column with a
   viewport-width trick rather than restructuring the template. */
.home .pk-carousel {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
}
/* Storefront pads the content area; the banner should sit under the nav */
.home .site-content .col-full { padding-top: 0; }
.home .site-main > .type-page > .entry-content > :first-child { margin-top: 0; }
.home .site-content { padding-top: 0; }
.home .entry-content { margin-top: 0; }


/* ---------- header rows ----------
   Row 1: logo left, search + cart right. Row 2: nav. Banner flush beneath.
   The cart is moved into row 1 by a hook in header.php, so this is a plain
   flex row rather than absolute positioning fighting Storefront's floats. */
.site-header { margin-bottom: 0 !important; }

@media (min-width: 768px) {
  .site-header .col-full {
    display: flex;
    align-items: center;
    gap: 1.5em;
    flex-wrap: nowrap;
  }
  .site-header .site-branding {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header .site-search {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 430px;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    position: static !important;
  }
  .site-header .site-header-cart {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    list-style: none;
  }
  .site-header .site-header-cart li { border: 0; float: none; }
  .site-header .site-header-cart .cart-contents { padding: .5em 0 .5em 1.9em; white-space: nowrap; }
  /* the dropdown basket must escape the flex row */
  .site-header .site-header-cart .widget_shopping_cart { position: absolute; right: 0; z-index: 99; }
  .site-header .col-full { position: relative; }
}

/* nav sits on its own row, flush to the banner */
.storefront-primary-navigation { border-top: 1px solid var(--pk-border); clear: both; }
.site-content { padding-top: 0 !important; }

/* ---------- catalogue toolbar ----------
   Storefront leaves the ordering <select> as a raw browser control, which on
   this palette looks like an unstyled form from another site. */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--pk-border);
  border-radius: 3px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230d3348' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center/11px;
  padding: .72em 2.6em .72em 1em;
  font-size: .92em; color: var(--pk-ink); cursor: pointer;
  line-height: 1.3;
}
.woocommerce .woocommerce-ordering select:focus { outline: 2px solid var(--pk-yellow); outline-offset: 1px; }
.woocommerce .woocommerce-result-count { color: var(--pk-muted); font-size: .9em; margin-top: .85em; }

/* ---------- archive heading ----------
   Storefront's page title is oversized for a catalogue and sat in a lot of
   dead space above the grid. */
.woocommerce .page-title,
.woocommerce-page .page-title,
.woocommerce .woocommerce-products-header__title {
  font-size: 1.8em; font-weight: 800; color: var(--pk-navy);
  text-transform: uppercase; letter-spacing: .4px;
  text-align: center; margin: .3em 0 1.1em;
}
.woocommerce .woocommerce-products-header { margin-bottom: 0; }
.woocommerce-breadcrumb { font-size: .85em; color: var(--pk-muted); margin-bottom: 1.4em; }

/* ---------- cart placement ----------
   Storefront emits .site-header-cart as a direct child of .site-header, not
   inside .col-full, so it cannot join the flex row. Align it to the content
   column's right edge instead, on the same line as the search. */
.site-header { position: relative; }

@media (min-width: 768px) {
  .site-header .site-search { margin-right: 186px !important; max-width: 380px; }
  .site-header .site-header-cart {
    position: absolute;
    top: 30px;
    right: calc((100% - 66.4em) / 2);
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
  }
  @media (max-width: 1180px) {
    .site-header .site-header-cart { right: 2.618em; }
    .site-header .site-search { margin-right: 176px !important; max-width: 300px; }
  }
}

/* ---------- mobile ----------
   Storefront stacks logo, then menu button, then content, each on its own row
   with generous padding - a lot of scrolling before anything is shown. Put the
   logo, menu and cart on one line and tighten the vertical rhythm. */
@media (max-width: 767px) {
  

  .site-header { padding: .7em 0 !important; margin-bottom: 0 !important; }
  .site-header .col-full {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
    flex-wrap: nowrap;
  }
  .site-header .site-branding { flex: 0 1 auto; margin: 0 !important; padding: 0 !important; }
  .site-header .custom-logo-link,
  .site-header .custom-logo-link img { max-width: 132px !important; width: 132px !important; }

  /* menu toggle and cart share the right edge with the logo */
  .site-header .menu-toggle,
  .storefront-primary-navigation .menu-toggle {
    position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
    margin: 0 !important; padding: .55em .8em !important;
    font-size: .8em !important; width: auto !important;
  }
  .site-header .site-header-cart {
    position: absolute; right: 1em; top: 50%; transform: translateY(-50%);
    width: auto !important; margin: 0 !important; padding: 0 !important;
  }
  .site-header .site-header-cart .cart-contents { padding: .3em 0 .3em 1.6em; font-size: 0; }
  .site-header .site-header-cart .cart-contents::after { font-size: 12px; }
  .site-header .site-header-cart .count { font-size: 11px; }
  .site-header .site-search { display: none; }   /* reachable from the menu */

  .storefront-primary-navigation { position: relative; border-top: 0; }
  .storefront-primary-navigation .col-full { padding: 0; }

  /* USP strip: compact rows rather than three tall blocks */
  .pk-usp { grid-template-columns: 1fr; }
  .pk-usp > div { padding: .85em 1em; text-align: left; border-bottom: 1px solid var(--pk-border); border-right: 0; }
  .pk-usp strong { font-size: .8em; margin-bottom: .1em; }
  .pk-usp span { font-size: .84em; }

  .pk-shelf { padding: 1.8em 0 .5em; }
  .pk-shelf__head h2 { font-size: 1.15em; }
  .pk-carousel { margin-bottom: 0; }

  /* two product tiles per row reads better than one giant card */
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: 1fr 1fr !important; gap: .8em; }
  .woocommerce ul.products li.product { padding: .7em .6em 1em; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .82em; padding: .5em 0 .15em; }
  .woocommerce ul.products li.product .price { font-size: .92em; margin-bottom: .6em; }
  .woocommerce ul.products li.product .button { font-size: .72em; padding: .8em .5em; }
}

/* On a phone the three USP blocks pushed the catalogue below the fold for no
   real gain - the promo bar above already carries delivery and payment terms.
   Products follow the banner directly instead. */
@media (max-width: 767px) {
  .pk-usp { display: none; }
}

/* ---------- mobile header: cart ----------
   font-size:0 on .cart-contents collapsed the element to zero width and took
   the icon with it (Storefront draws the basket as a pseudo-element, which
   inherits that size). Hide the amount/count spans instead and keep the icon
   at a real size, with the menu button clear of it. */
@media (max-width: 767px) {
  .site-header .site-header-cart {
    right: .75em;
    width: 42px !important;
    display: flex; align-items: center; justify-content: flex-end;
  }
  .site-header .site-header-cart .cart-contents {
    font-size: 1em;
    padding: .35em 0 .35em 1.9em;
    display: inline-block;
  }
  .site-header .site-header-cart .cart-contents .amount,
  .site-header .site-header-cart .cart-contents .count,
  .site-header .site-header-cart .cart-contents .woocommerce-Price-amount {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .site-header .site-header-cart .widget_shopping_cart { display: none; }

  .site-header .menu-toggle,
  .storefront-primary-navigation .menu-toggle { right: 68px; }
}

/* ---------- cart ----------
   Storefront runs the amount, the item count and the basket glyph together
   with no separation, so they read as one run-on string jammed against the
   edge. Space them and drop the redundant item count on desktop. */
.site-header .site-header-cart .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--pk-navy) !important;
  font-weight: 700;
  padding: .45em .2em .45em 2.1em !important;
  text-decoration: none !important;
}
.site-header .site-header-cart .cart-contents .count {
  font-weight: 400;
  color: var(--pk-muted);
  font-size: .86em;
}
@media (min-width: 768px) {
  /* the basket glyph already says "cart"; the worded count is noise */
  .site-header .site-header-cart .cart-contents .count { display: none; }
  .site-header .site-header-cart .cart-contents { font-size: .95em; }
}

/* USP strip now sits below the shelves, so give it air above */
.pk-usp { margin-top: 2.6em; border-top: 1px solid var(--pk-border); }
@media (max-width: 767px) {
  .pk-usp { display: grid; margin-top: 1.6em; }
}

/* Cart is absolutely placed against the content column's right edge; an
   earlier flex rule had pinned it static, so it floated to the viewport edge
   on its own line. Stated last and explicitly so nothing re-overrides it. */
@media (min-width: 768px) {
  .site-header .site-header-cart {
    position: absolute !important;
    float: none !important;
    top: 34px !important;
    right: calc((100% - 66.4em) / 2) !important;
  }
  @media (max-width: 1180px) {
    .site-header .site-header-cart { right: 2.618em !important; }
  }
}

/* ---------- hero carousels: desktop vs mobile tracks ---------- */
.pk-carousel--mobile  { display: none; }
.pk-carousel--desktop { display: block; }
@media (max-width: 767px) {
  .pk-carousel--desktop { display: none; }
  .pk-carousel--mobile  { display: block; }
}

/* slow, eased motion - a storefront banner, not a demand for attention */
.pk-carousel__track {
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .pk-carousel__track { transition: none; }
}
.pk-slide img { transition: none; }

/* ---------- cart & checkout ----------
   Storefront centres an oversized page title and leaves a large empty band
   above the table; on a two-item cart that is most of the first screen. The
   title is tightened, the totals become a bordered panel, and the primary
   action takes the brand yellow instead of Storefront's black. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
  font-size: 1.7em; font-weight: 800; color: var(--pk-navy);
  text-transform: uppercase; letter-spacing: .4px;
  text-align: left; margin: 0 0 1.2em;
}
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main { padding-top: 1.4em; }

/* items table */
.woocommerce table.shop_table {
  border: 1px solid var(--pk-border); border-radius: 4px; border-collapse: separate;
}
.woocommerce table.shop_table th {
  background: #f7f9fb; color: var(--pk-navy);
  text-transform: uppercase; font-size: .76em; letter-spacing: .5px;
  padding: .9em 1em;
}
.woocommerce table.shop_table td { padding: 1em; vertical-align: middle; }
.woocommerce table.cart img { width: 64px; border: 1px solid var(--pk-border); border-radius: 3px; }
.woocommerce table.cart td.product-name a { color: var(--pk-navy); font-weight: 700; text-decoration: none; }
.woocommerce table.cart td.product-name a:hover { color: var(--pk-ink); }

/* quantity stepper */
.woocommerce .quantity .qty {
  border: 1px solid var(--pk-border); border-radius: 3px; padding: .45em;
  width: 3.4em; text-align: center;
}

/* totals panel */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
  border: 1px solid var(--pk-border); border-radius: 4px;
  padding: 1.4em 1.5em; background: #fff;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-size: .82em; text-transform: uppercase; letter-spacing: .6px;
  color: var(--pk-muted); font-weight: 700;
  margin: 0 0 1em; padding-bottom: .7em; border-bottom: 1px solid var(--pk-border);
}
.woocommerce .cart_totals table.shop_table { border: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  background: transparent; padding: .6em 0; border: 0; font-size: .95em;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  border-top: 2px solid var(--pk-navy); padding-top: .9em;
  font-size: 1.1em; font-weight: 800; color: var(--pk-navy);
}
.woocommerce .cart_totals .order-total .amount { color: var(--pk-navy); }

/* primary action on brand */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  background: var(--pk-yellow) !important; color: var(--pk-ink) !important;
  font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  border-radius: 3px; padding: 1em 1.4em; width: 100%;
  text-align: center; text-decoration: none !important; font-size: .92em;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover { background: var(--pk-yellow-dark) !important; }

/* coupon row reads as a secondary action, not a headline */
.woocommerce .coupon { display: flex; gap: .6em; align-items: center; }
.woocommerce .coupon .input-text {
  border: 1px solid var(--pk-border); border-radius: 3px; padding: .7em .9em; max-width: 190px;
}
.woocommerce .cart .button, .woocommerce .cart input.button { font-size: .8em; }

/* checkout form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--pk-border); border-radius: 3px; padding: .8em .9em;
}
.woocommerce form .form-row label { font-weight: 600; color: var(--pk-navy); font-size: .9em; }

@media (max-width: 767px) {
  .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title { font-size: 1.3em; }
  .woocommerce .cart_totals, .woocommerce-checkout #order_review { padding: 1.1em; }
  .woocommerce table.shop_table td { padding: .7em .5em; }
}

/* ---------- cart polish ---------- */
/* Storefront leaves a tall empty band between breadcrumb and title */
.woocommerce-cart .site-main > .entry-header,
.woocommerce-checkout .site-main > .entry-header { margin-bottom: 0; }
.woocommerce-cart .site-content .col-full,
.woocommerce-checkout .site-content .col-full { padding-top: .6em; }
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { margin-top: 0; }
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title { margin-bottom: .9em; }

/* links inside the cart take the brand, not the browser default purple */
.woocommerce-cart a:not(.button),
.woocommerce-checkout a:not(.button) { color: var(--pk-navy); }
.woocommerce-cart a:not(.button):visited,
.woocommerce-checkout a:not(.button):visited { color: var(--pk-navy); }
.woocommerce .cart_totals a { text-decoration: underline; }

/* totals panel: let it occupy its half rather than floating in a void */
@media (min-width: 768px) {
  .woocommerce-cart .cart-collaterals { width: 100%; }
  .woocommerce-cart .cart-collaterals .cart_totals { width: 46%; float: right; }
}
@media (max-width: 767px) {
  .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
}

/* the coupon row shouldn't shout as loudly as checkout */
.woocommerce .coupon .button {
  background: #fff !important; color: var(--pk-navy) !important;
  border: 1px solid var(--pk-border) !important;
}
.woocommerce .coupon .button:hover { background: #f7f9fb !important; }

/* ---------- cart totals: spacing and layout ---------- */
.woocommerce .cart_totals table.shop_table th {
  text-align: left; padding: .65em 1.2em .65em 0 !important;
  white-space: nowrap; vertical-align: top;
  font-size: .8em; letter-spacing: .4px; color: var(--pk-muted);
}
.woocommerce .cart_totals table.shop_table td {
  text-align: right; padding: .65em 0 !important; vertical-align: top;
}
.woocommerce .cart_totals table.shop_table { width: 100%; }
.woocommerce .cart_totals .order-total th { color: var(--pk-navy); font-size: .95em; }

/* one country, one flat rate: the calculator and its "rates may update"
   notice only add doubt at the moment the customer is deciding */
.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .shipping-calculator-button,
.woocommerce .cart_totals .shipping-calculator-form,
.woocommerce .cart_totals .woocommerce-shipping-calculator,
.woocommerce .cart_totals td[data-title] p:not(.amount) { display: none !important; }
.woocommerce .cart_totals .shipping ul#shipping_method { margin: 0; list-style: none; }
.woocommerce .cart_totals .shipping ul#shipping_method li { margin: 0; }

/* title sits closer to the breadcrumb */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main { padding-top: .2em !important; }
.woocommerce-cart .entry-header, .woocommerce-checkout .entry-header { margin: 0 0 1em !important; }
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title { margin: 0 0 1em !important; }

/* give the empty half a purpose: continue-shopping sits opposite the totals */
.woocommerce-cart .cart-collaterals::before {
  content: "";
  display: block;
}

.pk-keep-shopping { float: left; width: 46%; padding-top: .4em; }
.pk-keep-shopping a {
  display: inline-block; color: var(--pk-navy); font-weight: 600;
  font-size: .92em; text-decoration: none; border-bottom: 2px solid var(--pk-yellow);
  padding-bottom: 2px;
}
.pk-keep-shopping a:hover { border-bottom-color: var(--pk-navy); }
@media (max-width: 767px) {
  .pk-keep-shopping { float: none; width: 100%; margin-bottom: 1.2em; }
}

/* Storefront's breadcrumb wrapper carries ~100px of padding, which on a cart
   page is most of the first screen before anything useful appears. */
.storefront-breadcrumb {
  padding-top: .9em !important;
  padding-bottom: .2em !important;
  margin-bottom: 0 !important;
}
.woocommerce-breadcrumb { margin-bottom: .4em !important; }
.site-content { padding-top: .4em !important; }

/* Storefront pads .entry-header by ~96px at the bottom, which on a cart or
   checkout page is a blank screen between the heading and the content. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header,
.page .entry-header {
  padding-bottom: 0 !important;
  margin-bottom: 1em !important;
}
.woocommerce-notices-wrapper:empty { display: none; margin: 0; padding: 0; }