/*
Theme Name: IAS Valley
Description: Storefront for IAS Valley. Layout conventions, band structure and colour weighting follow what established Indian exam-prep bookstores use, because that is what aspirants already know how to read. All identity, artwork and copy are IAS Valley's own.
Author: IAS Valley
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: iasvalley
*/

:root{
  --navy:#1e486d;      /* identity band */
  --sky:#c1e2ff;       /* navigation band */
  --link:#005275;      /* links */
  --title:#196baa;     /* product titles */
  --rust:#c3512f;      /* the buying action */
  --rust-dark:#a8431f;
  --yellow:#ffdc00;    /* discount flag */
  --ink:#252525;
  --mute:#6d6d6d;
  --hair:#e4e6ea;
  --page:#ffffff;

  /* One control height, so a field, a button and a joined pair line up.
     Field widths are set from what goes in them rather than from the
     column: a ten-digit number and an email address are not the same
     size of thing and should not get the same size of box. */
  --fh:44px;
  --w-name:262px;
  --w-phone:186px;
  --w-email:380px;
  --w-code:128px;
  --w-coupon:210px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--page); color:#000;
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.618;
}
img{max-width:100%; height:auto}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif; color:var(--title); margin:0 0 .4em; font-weight:700; line-height:1.2}
.wrap{max-width:1164px; margin:0 auto; padding:0 18px}
:focus-visible{outline:3px solid var(--rust); outline-offset:2px}
/* Available to a screen reader, absent from the page. */
.screen-reader-text{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:static; width:auto; height:auto; margin:0; clip:auto; clip-path:none;
  white-space:normal;
}

/* ---------------- header bands ---------------- */
.site-head{position:relative}
.band-brand{background:var(--navy); color:#fff}
.brand-in{display:flex; align-items:center; justify-content:center; min-height:108px}
.brand-link{display:flex; align-items:center; gap:16px; text-align:left; color:#fff}
.brand-link, .brand-link:hover, .brand-link:focus,
.brand-link *, .brand-link:hover *{text-decoration:none}
.brand-link:hover{opacity:.88}
.brand-mark{
  width:62px; height:62px; border-radius:50%; background:#fff; color:var(--navy);
  display:grid; place-items:center; font-family:"Roboto Condensed",Arial,sans-serif;
  font-weight:700; font-size:26px; letter-spacing:-.02em; flex:none;
}
.brand-name{
  display:block; font-family:"Roboto Condensed",Arial,sans-serif; font-weight:700;
  font-size:34px; letter-spacing:.01em; color:#fff; line-height:1.1;
}
.brand-tag{display:block; font-size:16px; color:#fff; opacity:.92}

.band-nav{background:var(--sky)}
.nav-in{display:flex; align-items:center; min-height:56px; gap:18px}
.nav-menu{list-style:none; display:flex; gap:26px; margin:0 auto 0 auto; padding:0; flex-wrap:wrap; justify-content:center}
.nav-menu .menu-item-account a{white-space:nowrap}
.nav-menu a{color:var(--link); font-size:17px; font-weight:400}
/* --title on the sky band measures 4.19:1, under AA. The band's own link
   colour clears it, and the weight already marks the current page. */
.nav-menu .current-menu-item a{color:var(--link); font-weight:700}
/* header cart, with the basket peeking out on hover */
.cart-wrap{position:relative}
.cart-link{color:var(--link); font-weight:700; font-size:16px; white-space:nowrap; display:inline-block; padding:6px 0}
.mini-cart{
  position:absolute; top:100%; right:0; z-index:60; width:330px;
  background:#fff; border:1px solid var(--hair); border-radius:4px;
  box-shadow:0 12px 30px rgba(20,28,40,.16); padding:16px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.cart-wrap:hover .mini-cart, .cart-wrap:focus-within .mini-cart{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* a small pointer up to the cart link */
.mini-cart::before{
  content:""; position:absolute; top:-7px; right:26px; width:12px; height:12px;
  background:#fff; border-left:1px solid var(--hair); border-top:1px solid var(--hair);
  transform:rotate(45deg);
}
.mini-cart ul.cart_list{list-style:none; margin:0; padding:0; max-height:356px; overflow-y:auto}
/* WooCommerce nests the thumbnail *inside* the product link, so the row has
   to be laid out on that anchor rather than on the list item. */
.mini-cart ul.cart_list li{
  position:relative; padding:8px 26px 8px 0; margin:0; border-bottom:1px solid var(--hair);
}
.mini-cart ul.cart_list li:first-child{padding-top:0}
.mini-cart ul.cart_list li:last-child{border-bottom:0; padding-bottom:0}
.mini-cart ul.cart_list li a:not(.remove){
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 10px; align-items:center;
  font-size:13.5px; font-weight:600; color:var(--title); line-height:1.26;
}
.mini-cart ul.cart_list li a:not(.remove) img{
  width:40px; height:56px; max-width:none; object-fit:cover; margin:0; float:none; display:block;
}
.mini-cart ul.cart_list li .quantity{
  display:block; margin:3px 0 0 50px; font-size:12px; color:var(--mute); line-height:1.2;
}
.mini-cart ul.cart_list li a.remove{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:22px; height:22px; font-size:14px;
}
/* The basket panel states the same arithmetic as the basket page: what the
   books come to, what any code takes off, and what is actually owed. The
   last line is the same figure the header shows, so the two can never
   disagree. */
.mini-cart .woocommerce-mini-cart__total{
  display:block; margin:12px 0 0; padding:12px 0 0;
  border-top:1px solid var(--hair); font-size:14.5px;
}
.mini-cart .iv-mini-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
}
.mini-cart .iv-mini-line + .iv-mini-line{margin-top:5px}
.mini-cart .iv-mini-off{color:var(--rust); font-weight:600}
.mini-cart .iv-mini-off .amount{color:var(--rust); font-weight:600}
.mini-cart .iv-mini-total{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--hair); font-size:15.5px;
}
.mini-cart .woocommerce-mini-cart__total strong{font-weight:700}
.mini-cart .iv-mini-total .amount{font-weight:700; font-size:17px; color:var(--ink)}
.mini-cart .iv-mini-line .amount{color:var(--ink)}
.mini-cart .woocommerce-mini-cart__buttons{display:flex; gap:8px; margin:14px 0 0}
.mini-cart .woocommerce-mini-cart__buttons a{
  flex:1; text-align:center; border-radius:4px; padding:10px 8px;
  font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
}
.mini-cart .woocommerce-mini-cart__buttons a:first-child{
  background:#fff; color:var(--link); border:2px solid var(--hair);
}
.mini-cart .woocommerce-mini-cart__buttons a:first-child:hover{border-color:var(--rust); color:var(--rust)}
.mini-cart .woocommerce-mini-cart__buttons a.checkout{background:var(--rust); color:#fff; border:2px solid var(--rust)}
.mini-cart .woocommerce-mini-cart__buttons a.checkout:hover{background:var(--rust-dark); border-color:var(--rust-dark)}
.mini-cart .woocommerce-mini-cart__empty-message{margin:0; font-size:14.5px; color:var(--mute)}
@media(max-width:620px){.mini-cart{width:min(320px,92vw)}}
.cart-link .amount{color:var(--link)}
svg.cart-icon{color:var(--rust); margin-left:5px; flex:none; vertical-align:-4px}

.band-note{background:#fff; border-bottom:1px solid var(--hair)}
.note-tel{font-weight:700; color:var(--ink); white-space:nowrap}
.note-tel:hover{color:var(--rust); text-decoration:none}
.note-hours{font-weight:700}
.band-note .wrap{min-height:46px; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:15.5px; color:#333; gap:5px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}

/* ---------------- content ---------------- */
#primary.content-area{max-width:1164px; margin:0 auto; padding:44px 18px 60px}
.woocommerce-products-header{display:none}
.woocommerce-result-count, .woocommerce-ordering{display:none}
.woocommerce-notices-wrapper:empty{display:none}

/* ---------------- the grid ---------------- */
ul.products{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:52px 26px;
}
/* WooCommerce's clearfix pseudo-elements become real cells inside a grid,
   which left a phantom empty product in the first position. */
.woocommerce ul.products::before, .woocommerce ul.products::after{content:none; display:none}
@media(max-width:1000px){ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){ul.products{grid-template-columns:repeat(2,1fr); gap:38px 20px}}
@media(max-width:440px){ul.products{grid-template-columns:1fr}}

/* align-items:center made every child shrink to its content, which squashed
   the covers and wrapped titles one word per line. Stretch, then centre text. */
/* Every card gets the same vertical rhythm so the controls line up across a
   row. Titles run to one or two lines and only some books carry a rating, so
   both slots reserve their space rather than collapsing. */
.woocommerce ul.products li.book{
  display:flex; flex-direction:column; text-align:center;
  width:auto; float:none; margin:0;
}
.woocommerce ul.products li.book .rating-slot{
  min-height:22px; display:flex; align-items:center; justify-content:center; margin:0 0 6px;
}
.woocommerce ul.products li.book .actions{
  margin-top:auto; padding-top:4px; display:flex; flex-direction:column; gap:10px;
}
.woocommerce ul.products li.book .cover{position:relative; display:block; width:100%; margin:0 0 14px}
.woocommerce ul.products li.book .cover img{
  display:block; width:100%; height:auto; aspect-ratio:1/1.414; object-fit:cover; margin:0;
}
/* WooCommerce ships .onsale as a circle with a fixed size; ours is a flag. */
.woocommerce ul.products li.book span.onsale, .woocommerce span.onsale{
  position:absolute; top:10px; left:10px; right:auto; z-index:2;
  background:var(--yellow); color:#3a3000; border-radius:2px;
  font-size:12.96px; font-weight:700; line-height:1; padding:6px 8px; white-space:nowrap;
  min-height:0; min-width:0; width:auto; height:auto; margin:0; text-align:left;
}
.woocommerce span.onsale .woocommerce-Price-amount{color:#3a3000; font-weight:700}

.woocommerce ul.products li.book .woocommerce-loop-product__title{
  font-family:"Roboto Condensed",Arial,sans-serif; font-size:19.8px; line-height:26.73px;
  font-weight:700; color:var(--title); margin:0 0 8px; padding:0; text-align:center;
  min-height:53.5px; /* two lines, so one-line titles do not ride up */
  display:flex; align-items:center; justify-content:center;
}
.woocommerce-loop-product__title a{color:var(--title)}
.woocommerce-loop-product__title a:hover{color:var(--link); text-decoration:none}

.woocommerce ul.products li.book .star-rating{margin:0 auto 8px}
/* WooCommerce ships #f0a020, about 2.1:1 on white. Darkened to clear AA
   while staying the same hue, because a rating that cannot be read is
   not a rating. */
.woocommerce .star-rating{color:#c9ccd1}
.star-rating{
  position:relative; font-size:14px; width:5.4em; height:1.4em; line-height:1.4;
  overflow:hidden; margin:0 0 8px; font-family:star; color:#f0a020;
}
.star-rating::before{content:"\73\73\73\73\73"; float:left; top:0; left:0; position:absolute; color:#d8d8d8}
.star-rating span{overflow:hidden; float:left; top:0; left:0; position:absolute; padding-top:1.5em}
/* The stars are drawn by this pseudo-element, so recolouring the span alone
   changed nothing. WooCommerce ships #f0a020, about 2.1:1 on white. */
.star-rating span::before{content:"\53\53\53\53\53"; top:0; position:absolute; left:0; color:#a5620a}

.woocommerce ul.products li.book .price{
  display:block; color:var(--ink); font-size:15.426px; font-weight:400;
  text-align:center; margin:0 0 4px; min-height:24px;
}
.price del{color:var(--mute); margin-right:5px; font-weight:400}
.price del .amount{color:var(--mute)}
.price ins{text-decoration:none; font-weight:700; color:var(--ink)}
.price .gst{font-style:normal; color:var(--mute); font-size:12.5px; margin-left:4px}

/* WooCommerce's own .button rules are more specific than a bare class, so
   these have to be written at the same weight or the buttons stay grey. */
.woocommerce ul.products li.book a.button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit{
  display:inline-block; background:var(--rust); color:#fff; border:0; border-radius:4px;
  font-size:14.4px; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  padding:11px 18.72px; line-height:1.2; cursor:pointer; text-decoration:none;
}
.woocommerce ul.products li.book a.button{margin:0 auto; width:100%; max-width:220px}
.woocommerce ul.products li.book a.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover{background:var(--rust-dark); color:#fff}
/* Once a book is in the basket the control says so, in a quiet green, and
   stays a way to go and look at the basket. WooCommerce's own response was a
   tick glyph pinned to the side of the button, which read as a rendering
   artefact rather than as confirmation. */
.woocommerce ul.products li.book a.button.is-added,
.woocommerce a.button.is-added, .woocommerce a.button.added{
  background:#e6f2ea; color:#1f6b47; border:1px solid #b9d9c6;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
/* The tick is drawn from two borders rather than loaded as a glyph or an
   image: it inherits the label's colour, so it can never fall out of step
   with it, and it costs nothing to fetch. */
.woocommerce ul.products li.book a.button.is-added::before,
.woocommerce a.button.is-added::before, .woocommerce a.button.added::before{
  content:""; width:6px; height:11px; flex:none; margin-top:-3px;
  border:solid currentColor; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.woocommerce ul.products li.book a.button.is-added:hover,
.woocommerce a.button.is-added:hover, .woocommerce a.button.added:hover{
  background:#d9ebe0; color:#175437;
}
.woocommerce a.button.added::after, .woocommerce a.button.is-added::after{content:none}
/* The header basket already shows the new total, so the extra link under the
   button was one more thing to read for nothing. */
.woocommerce a.added_to_cart, .added_to_cart{display:none}

/* the free-extract control, paired with the buy button */
.woocommerce ul.products li.book .extract{
  display:block; margin:0 auto; width:100%; max-width:220px; text-align:center;
  border:2px solid var(--hair); border-radius:4px; padding:9px 12px;
  font-size:13.5px; font-weight:700; color:var(--link); text-transform:none;
}
.woocommerce ul.products li.book .extract:hover{
  border-color:var(--rust); color:var(--rust); text-decoration:none;
}
.extract-single{
  display:inline-block; margin:14px 0 0; border:2px solid var(--hair); border-radius:4px;
  padding:12px 20px; font-size:15px; font-weight:700; color:var(--link);
}
.extract-single:hover{border-color:var(--rust); color:var(--rust); text-decoration:none}

/* the remove control in the cart: a quiet round button, not a bare red cross */
.woocommerce table.cart td.product-remove{width:44px}
.woocommerce a.remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; border:1px solid var(--hair);
  background:#fff; color:var(--mute) !important; font-size:17px; line-height:1;
  font-weight:400; text-decoration:none; transition:background .13s ease, color .13s ease;
}
.woocommerce a.remove:hover{
  background:var(--rust); border-color:var(--rust); color:#fff !important;
}

/* ---------------- single product ---------------- */
.woocommerce div.product{display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:0 40px; align-items:start}
@media(max-width:760px){.woocommerce div.product{grid-template-columns:1fr}}
.woocommerce div.product div.images{width:auto; float:none; margin:0}
.woocommerce div.product div.summary{width:auto; float:none; margin:0}
.woocommerce div.product .product_title{font-size:36px; color:var(--title); line-height:1.15; margin-bottom:12px}
.woocommerce div.product p.price{font-size:22.5px; color:var(--ink); font-weight:700}
.woocommerce div.product p.price del{color:var(--mute); font-weight:400}
.woocommerce div.product p.price ins{text-decoration:none; font-weight:700}
.woocommerce div.product .single_add_to_cart_button{
  background:var(--rust); color:#fff; border-radius:4px; font-size:18.72px; font-weight:700;
  text-transform:uppercase; padding:14px 24.336px; border:0;
}
.woocommerce div.product .single_add_to_cart_button:hover{background:var(--rust-dark)}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related, .woocommerce div.product .up-sells{grid-column:1/-1; margin-top:40px}
.woocommerce div.product table{border-collapse:collapse; width:100%; max-width:560px}
.woocommerce div.product table td{padding:9px 14px 9px 0; border-bottom:1px solid var(--hair); font-size:16.5px}
.woocommerce-tabs ul.tabs{list-style:none; padding:0; margin:0 0 18px; display:flex; gap:26px;
  border-bottom:1px solid var(--hair)}
.woocommerce-tabs ul.tabs a{font-weight:700; padding-bottom:10px; display:inline-block}
.woocommerce-tabs ul.tabs li.active a{color:var(--title); border-bottom:3px solid var(--rust)}

/* The zoom overlay sits on top of the gallery anchor and ate every click,
   so the lightbox never opened. Let clicks pass through to the link. */
.woocommerce div.product div.images img.zoomImg{pointer-events:none}

/* the image lightbox: make the close and counter unmistakably visible */
.pswp{z-index:99999}
.pswp__bg{background:rgba(10,12,16,.94)}
.pswp__button{opacity:1}
.pswp__button--close{
  width:48px; height:48px; background:rgba(255,255,255,.14) !important;
  border-radius:50%; margin:10px 14px 0 0; position:relative;
}
.pswp__button--close::after{
  content:"\00d7"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:30px; line-height:1; font-weight:300;
}
.pswp__button--close:hover{background:rgba(255,255,255,.28) !important}
.pswp__top-bar{background:transparent}
.pswp__counter{color:#fff; opacity:.85; font-size:14px; padding:14px 0 0 16px}
.pswp__caption__center{text-align:center; font-size:14px}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
  background:#fff; border:1px solid var(--hair); border-radius:50%;
  width:36px; height:36px; line-height:34px; text-align:center; font-size:18px;
  top:10px; right:10px; color:var(--ink); z-index:9;
}

/* ---------------- ordinary pages, cart, checkout ---------------- */
.page{max-width:1164px; margin:0 auto; padding:44px 18px 60px}
/* One page title. The cart, checkout and account pages each carried their own
   copy of this block at 40px, which made the word CART larger than the 34px
   wordmark in the identity band. The caps and the centring are the shop's
   convention on those pages and are kept; only the sprawl goes. */
.page-title{font-size:34px; color:var(--title); margin-bottom:18px; letter-spacing:.01em}
.woocommerce-cart .page-title, .woocommerce-checkout .page-title,
.woocommerce-account .page-title{
  text-align:center; text-transform:uppercase; color:var(--ink); margin-bottom:26px;
}
.page h2{font-size:26px; margin:30px 0 8px}
/* the dead-end page: a way out, not just an apology */
.page-lost{max-width:60ch; color:var(--mute); font-size:17px; margin:0 0 22px}
.page-lost-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0}
.page-lost-actions .extract{display:inline-block; width:auto; margin:0; padding:9px 18px}
.page table{border-collapse:collapse; width:100%; max-width:600px}
.page td{padding:9px 14px 9px 0; border-bottom:1px solid var(--hair)}
.woocommerce table.shop_table{border:1px solid var(--hair); border-collapse:collapse; width:100%}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{padding:12px; border-bottom:1px solid var(--hair)}
.woocommerce form .form-row input:not([type=checkbox]):not([type=radio]),
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  border:1px solid #cfd4da; border-radius:4px; font-size:16px; width:100%;
}
/* Text fields and buttons share one height so a field, a button and a
   joined field-plus-button pair all sit on the same baseline. */
.woocommerce form .form-row input:not([type=checkbox]):not([type=radio]),
.woocommerce form .form-row select{height:var(--fh); padding:0 12px}
.woocommerce form .form-row textarea{padding:11px 12px}
.woocommerce form .form-row input:focus, .woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{outline:none; border-color:var(--rust)}
.woocommerce form .form-row label{font-weight:600; font-size:15.5px; display:block; margin-bottom:5px}
.woocommerce form .form-row label .optional{display:none}
.woocommerce #payment{background:#f7f8fa; border:1px solid var(--hair); border-radius:4px; padding:18px}



/* ---------------- cart: items left, totals top right ---------------- */
.woocommerce-cart .woocommerce{
  display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:0 44px; align-items:start;
}
@media(max-width:900px){.woocommerce-cart .woocommerce{grid-template-columns:1fr; gap:30px 0}}
.woocommerce-cart .woocommerce > *{grid-column:1/-1; grid-row:1}
.woocommerce-cart .iv-offers-slot{grid-column:1/-1; grid-row:2}
.woocommerce-cart .woocommerce-cart-form{grid-column:1; grid-row:3; min-width:0}
.woocommerce-cart .cart-collaterals{grid-column:2; grid-row:3; width:auto; float:none; margin:0}

/* The cart table has to live inside its column rather than run under the
   totals box, and its columns need explicit widths or the thumbnail
   collapses to a sliver. */
.woocommerce-cart table.cart{width:100%; table-layout:fixed; border-collapse:collapse}
.woocommerce-cart table.cart th, .woocommerce-cart table.cart td{
  padding:14px 10px; border-bottom:1px solid var(--hair); font-size:15.5px; vertical-align:middle;
}
.woocommerce-cart table.cart td.product-remove{width:46px; text-align:center; padding-left:0}
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail{width:66px}
.woocommerce-cart table.cart td.product-thumbnail img{width:52px; max-width:none; display:block}
.woocommerce-cart table.cart td.product-name{width:auto; word-break:normal; overflow-wrap:anywhere}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart th.product-price{width:82px}
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart th.product-quantity{width:96px}
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart th.product-subtotal{width:88px; text-align:right}
/* Nothing in the basket has a quantity worth showing; see cart.php. */
.woocommerce-cart table.cart.iv-no-qty td.product-quantity,
.woocommerce-cart table.cart.iv-no-qty th.product-quantity{display:none}
.woocommerce-cart table.cart td.actions{border-bottom:0}
.woocommerce-cart .quantity input.qty{width:58px; padding:8px; border:1px solid #cfd4da; border-radius:4px}
@media(max-width:900px){
  .woocommerce-cart .iv-offers-slot,
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{grid-column:1; grid-row:auto}
}
.woocommerce-cart .cart-collaterals .cart_totals{
  width:auto; float:none; background:#fff; border:1px solid var(--hair);
  border-radius:4px; padding:24px;
}
.woocommerce-cart .cart_totals h2{
  font-size:22px; color:var(--title); text-transform:uppercase;
  letter-spacing:.01em; margin:0 0 14px;
}
.woocommerce-cart .cart_totals table{border:0; margin:0}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{
  padding:12px 0; border-bottom:1px solid var(--hair); font-size:16px; background:transparent;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td{font-size:19px; font-weight:700}
.woocommerce-cart .wc-proceed-to-checkout{padding:16px 0 0}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:block; width:100%; text-align:center;
  background:var(--rust); color:#fff; border-radius:4px; border:0;
  font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  padding:15px 20px; margin:0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{background:var(--rust-dark); color:#fff}
.woocommerce-cart table.cart img{width:56px; height:auto}
.woocommerce-cart table.cart td.product-name a{color:var(--title); font-weight:600}
.woocommerce-cart .actions .button[disabled]{opacity:.45}

/* The coupon field sits above the basket table rather than under it, so a
   buyer who has just removed a code does not have to scroll the whole
   basket to enter another. The template override does the move. */
.woocommerce .cart-coupon-top{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  width:fit-content; max-width:100%; margin:0 0 18px;
}
.woocommerce .cart-coupon-top .input-text{
  width:var(--w-coupon); flex:0 0 var(--w-coupon); height:var(--fh); margin:0;
  border:1px solid #cfd4da; border-radius:4px; padding:0 13px;
  font-size:15px; text-transform:uppercase; letter-spacing:.04em; font-weight:600;
}
.woocommerce .cart-coupon-top .input-text::placeholder{
  color:#9aa0a6; text-transform:none; letter-spacing:0; font-weight:400;
}
.woocommerce .cart-coupon-top .input-text:focus{outline:none; border-color:var(--rust)}
.woocommerce .cart-coupon-top .button{margin:0; height:var(--fh); padding:0 20px; white-space:nowrap}

/* Nothing in the basket has a quantity, so Update cart has nothing to submit;
   see cart.php. The row keeps the cart nonce, which still posts while hidden. */
.woocommerce table.cart tr.iv-no-actions{display:none}
/* Update cart is all that is left in the actions row at the foot. */
.woocommerce table.cart td.actions{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 14px;
}
.woocommerce table.cart td.actions .button{margin:0; height:var(--fh); padding:0 20px; white-space:nowrap}
@media(max-width:620px){
  .woocommerce .cart-coupon-top{width:auto}
  .woocommerce .cart-coupon-top .input-text{flex:1 1 100%; width:auto}
  .woocommerce table.cart td.actions{flex-direction:column; align-items:stretch}
}

/* The checkout coupon. WooCommerce stacks a full-width box above a button;
   a discount code is a short string and gets a short box, on one line. */
.woocommerce form.checkout_coupon{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  width:fit-content; max-width:100%;
  border:1px solid var(--hair); border-radius:4px;
  padding:16px 18px; margin:0 0 26px; text-align:left;
}
.woocommerce form.checkout_coupon .form-row{
  width:auto; max-width:none; float:none; margin:0; padding:0;
}
.woocommerce form.checkout_coupon #coupon_code{
  width:var(--w-coupon); height:var(--fh); margin:0; padding:0 13px;
  border:1px solid #cfd4da; border-radius:4px; font-size:15px;
  text-transform:uppercase; letter-spacing:.04em; font-weight:600;
}
.woocommerce form.checkout_coupon #coupon_code::placeholder{
  color:#9aa0a6; text-transform:none; letter-spacing:0; font-weight:400;
}
.woocommerce form.checkout_coupon .button{
  height:var(--fh); margin:0; padding:0 20px; white-space:nowrap;
}
.woocommerce form.checkout_coupon .clear{display:none}
.woocommerce-form-coupon-toggle .woocommerce-info{
  border:0; border-top:3px solid var(--title); background:#f6f7f9; color:var(--ink);
  padding:14px 18px; margin:0 0 20px; font-size:15.5px; line-height:1.5;
  max-width:620px;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before{content:none}

/* ---------------- checkout: billing left, order box right ---------------- */
.woocommerce-checkout .page{max-width:1164px}

.woocommerce form.checkout{
  display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:0 44px; align-items:start;
}
@media(max-width:900px){.woocommerce form.checkout{grid-template-columns:1fr; gap:30px 0}}
/* Anything unexpected in the form spans the full width rather than breaking the split. */
.woocommerce form.checkout > *{grid-column:1/-1}
.woocommerce form.checkout > #customer_details{grid-column:1; grid-row:1 / span 2}
.woocommerce form.checkout > #order_review_heading{grid-column:2; grid-row:1}
.woocommerce form.checkout > #order_review{grid-column:2; grid-row:2}
@media(max-width:900px){
  .woocommerce form.checkout > #customer_details,
  .woocommerce form.checkout > #order_review_heading,
  .woocommerce form.checkout > #order_review{grid-column:1; grid-row:auto}
}

/* WooCommerce splits customer details into .col-1 (billing) and .col-2
   (order notes). A PDF has nothing to note, and it was eating a column. */
#customer_details{display:block}
#customer_details .col-1{width:auto; float:none; margin:0}
#customer_details .col-2{display:none}
#customer_details h3, .woocommerce-billing-fields h3{
  font-size:22px; color:var(--title); text-transform:uppercase; letter-spacing:.01em; margin-bottom:16px;
}
/* Fixed tracks rather than 1fr, so a name field stays a name field's width
   instead of stretching to whatever the column happens to be. */
.woocommerce-billing-fields__field-wrapper{
  display:grid; grid-template-columns:repeat(2,var(--w-name)); justify-content:start; gap:0 20px;
}
@media(max-width:600px){
  .woocommerce-billing-fields__field-wrapper{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px}
  #billing_first_name_field, #billing_last_name_field{max-width:none}
}
.woocommerce form .form-row{margin:0 0 18px; padding:0; float:none; width:auto; max-width:100%}
.woocommerce form .form-row-wide, .woocommerce form .form-row.notes{grid-column:1/-1}

/* The verification control belongs directly under the number it verifies,
   wherever the plugin happened to insert it in the DOM. */
#billing_phone_field{order:1; grid-column:1/-1; max-width:none}
#ivotp-row{order:2; grid-column:1/-1; margin:-2px 0 20px}
#billing_email_field{order:3; grid-column:1/-1; max-width:var(--w-email)}

/* ---- mobile verification ----
   Send code sits on the same line as the number it verifies. The phone field
   is sized to ten digits, so the rest of that line was empty. */
#billing_phone_field{display:flex; flex-wrap:wrap; align-items:center; gap:12px 10px; max-width:none}
#billing_phone_field label{flex:0 0 100%}
#billing_phone{flex:0 0 var(--w-phone); width:var(--w-phone)}
#ivotp-controls{display:flex; align-items:center; gap:10px}
#ivotp-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
/* The code box and its Verify button are one control, not two objects. */
#ivotp-code-wrap{display:flex; align-items:stretch; order:1}
#ivotp-controls .ivotp-code{
  width:var(--w-code); height:var(--fh); margin:0; padding:0 12px;
  border:1px solid #cfd4da; border-right:0; border-radius:4px 0 0 4px;
  font-size:17px; font-weight:700; letter-spacing:.24em; text-align:center;
  font-variant-numeric:tabular-nums;
}
#ivotp-controls .ivotp-code::placeholder{
  font-size:14px; font-weight:400; letter-spacing:0; color:#9aa0a6;
}
#ivotp-controls .ivotp-code:focus{outline:none; border-color:var(--rust)}
.woocommerce #ivotp-verify.button{
  height:var(--fh); margin:0; padding:0 18px; border-radius:0 4px 4px 0;
}
/* Sending is the primary action. Once a code is out, resending is a
   fallback and should not compete with Verify for attention. */
.woocommerce #ivotp-send.button{order:2; height:var(--fh); margin:0; padding:0 18px}
.woocommerce #ivotp-send.button.is-resend{
  background:none; color:var(--link); height:auto; padding:0;
  font-size:14px; font-weight:600; text-transform:none; letter-spacing:0;
  text-decoration:underline; text-underline-offset:3px;
}
.woocommerce #ivotp-send.button.is-resend:hover{background:none; color:var(--rust)}
.woocommerce #ivotp-send.button[disabled]{opacity:.55; cursor:default}
/* The running commentary always takes its own line, so it never has to
   flow around the controls. */
.ivotp-msg{flex:0 0 100%; order:3; margin:0; font-size:14.5px; line-height:1.45; color:var(--mute)}
.ivotp-msg:empty{display:none}
.ivotp-ok{color:#1f6b47; font-weight:600}
.ivotp-err{color:#a8431f; font-weight:600}
#ivotp-recaptcha{flex:0 0 100%; order:4}

#order_review_heading{
  font-size:22px; color:var(--title); text-transform:uppercase; letter-spacing:.01em;
  margin:0 0 14px;
}
#order_review{
  background:#fff; border:1px solid var(--hair); border-radius:4px; padding:26px;
}
#order_review table.shop_table{border:0; margin:0 0 8px}
#order_review table.shop_table th, #order_review table.shop_table td{
  padding:12px 0; border-bottom:1px solid var(--hair); font-size:16px;
}
#order_review table.shop_table tfoot .order-total td{font-size:19px; font-weight:700}
#order_review .wc_payment_methods{list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--hair)}
#order_review .wc_payment_method label{font-weight:700; font-size:16px}
#order_review .payment_box{background:#f3f4f6; border-radius:4px; padding:14px 16px; margin:10px 0 0; font-size:15px}
#order_review .woocommerce-terms-and-conditions-wrapper{margin:18px 0 0; font-size:15.5px}
.woocommerce #payment{background:transparent; border:0; padding:0}

/* the button that actually takes the money */
.woocommerce #place_order, .woocommerce #payment #place_order{
  display:block; width:100%; float:none; margin:18px 0 0;
  background:var(--rust); color:#fff; border:0; border-radius:4px;
  font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  padding:15px 20px; cursor:pointer;
}
.woocommerce #place_order:hover{background:var(--rust-dark)}


/* ---------------- my account ---------------- */
.woocommerce-account .woocommerce{
  display:grid; grid-template-columns:230px minmax(0,1fr); gap:0 44px; align-items:start;
}
@media(max-width:820px){.woocommerce-account .woocommerce{grid-template-columns:1fr; gap:24px 0}}
.woocommerce-account .woocommerce > *{grid-column:1/-1}
/* WooCommerce floats these and gives the nav width:30%, which inside a grid
   column collapsed it to 70px and clipped every label. */
.woocommerce-account .woocommerce-MyAccount-navigation{
  grid-column:1; grid-row:2; width:auto !important; float:none !important; margin:0;
}
.woocommerce-account .woocommerce-MyAccount-content{
  grid-column:2; grid-row:2; width:auto !important; float:none !important; margin:0; min-width:0;
}
@media(max-width:820px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{grid-column:1; grid-row:auto}
}

.woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0; border:1px solid var(--hair); border-radius:4px; overflow:hidden}
.woocommerce-MyAccount-navigation li{margin:0; border-bottom:1px solid var(--hair)}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation li a{
  display:block; padding:12px 16px; font-size:15.5px; font-weight:600; color:var(--link);
}
.woocommerce-MyAccount-navigation li a:hover{background:#f6f7f9; text-decoration:none; color:var(--title)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--navy); color:#fff}

.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3{
  font-size:22px; color:var(--title); margin:0 0 14px;
}
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table{
  width:100%; border:1px solid var(--hair); border-collapse:collapse; border-radius:4px;
}
.woocommerce-account table.shop_table th{
  background:#f6f7f9; font-size:14px; text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--hair); font-weight:700;
}
.woocommerce-account table.shop_table td{
  padding:14px; border-bottom:1px solid var(--hair); font-size:15px; vertical-align:middle;
}

/* WooCommerce stacks these actions with no spacing, so they collide. */
.woocommerce-orders-table__cell-order-actions,
.woocommerce-account td.woocommerce-orders-table__cell-order-actions{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-start;
}
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-button.button{
  margin:0 !important; float:none; display:inline-block;
  font-size:12.5px; padding:9px 14px; white-space:nowrap; line-height:1.2;
}
.woocommerce-orders-table__cell-order-actions .button.cancel{
  background:#fff; color:var(--ink); border:2px solid var(--hair); padding:7px 12px;
}
.woocommerce-orders-table__cell-order-actions .button.cancel:hover{
  background:#fff; border-color:var(--rust); color:var(--rust);
}

/* downloads: the page buyers actually come back for */
.woocommerce-account .woocommerce-table--order-downloads td.download-file a{
  display:inline-block; background:var(--rust); color:#fff; border-radius:4px;
  padding:9px 16px; font-size:13.5px; font-weight:700; text-transform:uppercase;
}
.woocommerce-account .woocommerce-table--order-downloads td.download-file a:hover{
  background:var(--rust-dark); text-decoration:none;
}
.woocommerce-account .woocommerce-Message, .woocommerce-account .woocommerce-info{
  border-top:3px solid var(--title); background:#f6f7f9; padding:18px 20px;
  margin:0 0 22px; font-size:15.5px; line-height:1.5; overflow:hidden;
}
.woocommerce-account .woocommerce-Message .button, .woocommerce-account .woocommerce-info .button{
  float:right; margin:0 0 8px 20px;
}
.woocommerce-account .woocommerce-Message::before, .woocommerce-account .woocommerce-info::before{content:none}
.woocommerce-account form .form-row{margin-bottom:16px}
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register{
  border:1px solid var(--hair); border-radius:4px; padding:24px; max-width:460px;
}

/* ---------------- footer ---------------- */
.site-foot{background:var(--navy); color:#fff; margin-top:56px; padding:28px 0 34px}
.site-foot a{color:#fff}
.site-foot ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px; margin:0 0 12px; padding:0;
  justify-content:center; font-size:16px}
.foot-note{margin:0; text-align:center; font-size:15px; opacity:.88}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}


/* ================================================================= phones
   Most of this audience arrives on a mid-range Android. These rules are
   not a scaled-down desktop: they fix the three things that actually go
   wrong at 390px — a grid column wider than the screen, controls too small
   to hit with a thumb, and type set for a laptop.
   ================================================================= */

/* A bare 1fr column is minmax(auto,1fr), and auto is min-content, so a grid
   item whose contents will not shrink pushes the column wider than its own
   container and the whole page scrolls sideways. The product gallery did
   exactly that: 450px of column inside a 354px page. minmax(0,1fr) lets the
   column shrink. */
@media(max-width:760px){
  .woocommerce div.product{grid-template-columns:minmax(0,1fr)}
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary{min-width:0; max-width:100%}
.woocommerce div.product div.images img{width:100%; height:auto}

@media(max-width:900px){
  .woocommerce-cart .woocommerce, .woocommerce form.checkout,
  .woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:760px){
  /* Thumb-sized targets. 44px is the figure Apple and Google both publish;
     anything under it is a mis-tap waiting to happen. */
  /* The basket leaves the menu row entirely and sits at the top right of
     the identity band, which is where a shopper looks for it anyway. That
     gives the four labels the whole width, so none of them ever drops to a
     second line or gets clipped, down to a 320px screen. */
  .nav-in{min-height:52px; gap:0}
  .nav-menu{flex:1 1 auto; min-width:0; gap:0 12px; margin:0; flex-wrap:nowrap; justify-content:center}
  .nav-menu a{display:flex; align-items:center; min-height:44px; padding:0 4px; font-size:16px; white-space:nowrap}
  .cart-word{display:none}
  /* The basket shares the identity row rather than floating over it. Pinned
     absolutely it sat on top of the wordmark and the tagline at every phone
     width; as a flex sibling the two cannot collide by construction. */
  .brand-in{justify-content:space-between; gap:12px}
  .brand-link{flex:1 1 auto; min-width:0}
  .cart-wrap{position:static; flex:0 0 auto}
  .cart-link{
    min-height:40px; display:flex; align-items:center; gap:6px; padding:0 10px;
    background:rgba(255,255,255,.12); border-radius:4px; color:#fff; font-size:15px;
  }
  .cart-link .amount{color:#fff}
  svg.cart-icon{color:#fff; margin-left:2px}

  .brand-in{min-height:88px}
  .brand-mark{width:52px; height:52px; font-size:22px}
  .brand-name{font-size:27px}
  .brand-tag{font-size:14px; line-height:1.35}
  /* One tappable line instead of three wrapped ones. The framing words are
     not worth 80px of every phone screen; the number is. */
  .band-note .wrap{min-height:42px; gap:6px; padding-top:4px; padding-bottom:4px; flex-wrap:nowrap}
  .band-note{font-size:14.5px; line-height:1.35}
  .note-lead, .note-hours{display:none}
  .note-how{color:var(--mute); font-size:13.5px}
  .note-tel{
    display:inline-flex; align-items:center; min-height:34px;
    font-size:16px; color:var(--link); text-decoration:underline; text-underline-offset:3px;
  }

  .page{padding:26px 16px 44px}
  .page-title, .woocommerce-cart .page-title, .woocommerce-checkout .page-title,
  .woocommerce-account .page-title{font-size:28px; margin-bottom:18px}

  /* the basket: a row is a card, not a squeezed table row */
  .woocommerce-cart table.cart td.product-remove{width:44px}
  .woocommerce-cart table.cart td.product-remove a.remove{
    width:34px; height:34px; line-height:32px; font-size:19px;
  }
  .woocommerce-cart table.cart td.product-thumbnail,
  .woocommerce-cart table.cart th.product-thumbnail{width:56px}
  .woocommerce-cart table.cart td.product-thumbnail img{width:44px}
  .woocommerce-cart table.cart th, .woocommerce-cart table.cart td{padding:10px 6px; font-size:14.5px}
  .woocommerce-cart table.cart td.product-name a{font-size:14.5px; line-height:1.35}

  /* password reveal and other icon-only controls */
  .woocommerce form .show-password-input,
  .woocommerce-account button.show-password-input{width:44px; height:44px; background-position:center}

  .woocommerce #place_order, .woocommerce #payment #place_order{font-size:17px; padding:16px 18px}

  /* Three tabs in a 354px row do not fit on one line; let them wrap rather
     than run off the side of the screen. */
  .woocommerce-tabs ul.tabs{flex-wrap:wrap; gap:0 20px; row-gap:0}
  .woocommerce-tabs ul.tabs li{margin:0}
  .woocommerce-tabs ul.tabs a{padding:10px 0; display:flex; align-items:center; min-height:44px}

  /* A full-width A4 jacket is 552px tall on a 390px screen, which pushed the
     title to 1107px and the buy button to 1570px — four screens of one-thumb
     scrolling to reach the thing the page exists for. The cover stays the
     hero, at a size a phone can actually take in. */
  /* On a phone the three offer rows were a 300px wall between the price and
     the buy button. The offer is a bonus; the button is the point. Only the
     strip carries an order, so it falls after every other block in the
     summary without having to order the rest. */
  .woocommerce div.product div.summary{display:flex; flex-direction:column}
  .woocommerce div.product div.summary .iv-offers{order:5; margin:18px 0 0}
  .woocommerce div.product div.summary .product_meta{order:6}
  .woocommerce div.product div.images{max-width:216px; margin:0 auto 4px}
  .woocommerce div.product .product_title{font-size:26px; line-height:1.15}
  .woocommerce div.product p.price{font-size:21px}

  /* Hover-zoom has no meaning on a touch screen, and its 800px overlay
     image sits outside the gallery box. The lightbox still works on tap. */
  .woocommerce div.product div.images img.zoomImg{display:none !important}
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger{
    width:44px; height:44px; line-height:42px; font-size:20px;
  }

  .woocommerce-cart table.cart td.product-remove a.remove{width:40px; height:40px; line-height:38px}
}

.lbl-short{display:none}

@media(max-width:560px){
  /* The long account label pushed the menu onto a second row under the
     basket link. Swap it for the short one and the row holds. */
  .lbl-long{display:none}
  .lbl-short{display:inline}
}

/* On the very smallest phones four labels plus the basket cannot share a
   44px row. Rather than stack the header three rows deep, the menu becomes
   one scrollable row: the last label is visibly clipped, which is the cue
   to swipe, and the header stays one row tall. */
@media(max-width:370px){
  .nav-menu{gap:0 8px}
  .nav-menu a{font-size:15px; padding:0 3px}
}

/* ---------- the shop grid on a phone ----------
   One book per row, laid out sideways so the row is actually used: a real
   cover on the left, the details beside it, the two controls across the
   foot. WooCommerce's small-screen sheet forces li.product to 48% with an
   attribute selector, which outranks a plain class rule, hence the [class*=]
   in these selectors. */
@media(max-width:560px){
  ul.products{grid-template-columns:minmax(0,1fr); gap:14px}

  .woocommerce ul.products li.book,
  .woocommerce ul.products[class*="columns-"] li.book{
    width:auto; float:none; margin:0;
    display:grid; grid-template-columns:118px minmax(0,1fr); gap:0 14px;
    align-items:start; text-align:left;
    border:1px solid var(--hair); border-radius:4px; padding:12px;
  }
  .woocommerce ul.products li.book .cover{grid-column:1; grid-row:1/span 4; width:118px; margin:0}
  .woocommerce ul.products li.book .woocommerce-loop-product__title{
    grid-column:2; font-size:17px; line-height:1.25; margin:0 0 4px; text-align:left;
  }
  .woocommerce ul.products li.book .rating-slot{grid-column:2; justify-content:flex-start; min-height:0; margin:0}
  .woocommerce ul.products li.book .star-rating{margin:0 0 4px}
  .woocommerce ul.products li.book .price{grid-column:2; text-align:left; margin:2px 0 0}

  /* The controls run the full width of the card, side by side, so the row
     ends on a clean edge instead of a ragged column of buttons. */
  .woocommerce ul.products li.book .actions{
    grid-column:1/-1; flex-direction:row; gap:8px; margin-top:12px; padding-top:0;
  }
  .woocommerce ul.products li.book .actions > *{flex:1 1 0; min-width:0; margin:0; max-width:none}
  .woocommerce ul.products li.book a.button{padding:11px 6px; font-size:13px}
  .woocommerce ul.products li.book .extract{padding:9px 6px; font-size:13px; white-space:nowrap}
  /* "Read a free extract" wrapped to two lines, and three at 320px, which
     dragged both controls to 64px tall. The short label holds one line. */
  .woocommerce ul.products li.book .extract .lbl-long{display:none}
  .woocommerce ul.products li.book .extract .lbl-short{display:inline}
  .woocommerce ul.products li.book .added_to_cart{grid-column:1/-1; margin-top:6px}
}

@media(max-width:440px){
  .nav-menu{gap:0 6px}
  .nav-menu a{font-size:15.5px; padding:0 4px}
  .brand-name{font-size:24px}
  .woocommerce-cart table.cart th.product-price,
  .woocommerce-cart table.cart td.product-price{display:none}
}

/* At 320px "ADD TO BASKET" still took two lines while its neighbour took one,
   so the pair sat 10px taller than it needed to. This has to come after the
   560px card block: a media query adds no specificity, and that block carries
   the same selector weight. */
@media(max-width:370px){
  .woocommerce ul.products li.book a.button{
    font-size:12px; padding:11px 4px; letter-spacing:0; white-space:nowrap;
  }
  .woocommerce ul.products li.book .extract{font-size:12px; padding:9px 4px}
}